Jouer un fichier audio sans relancer au changement de page ?

[RobertG]

Merci Yann, mais je suis vraiment nul sur ce coup : impossible de faire démarrer le son au clic quelque part sur la page.
Voilà la dernière version du script. J'ai tenté un "alert" dans la fonction onmousedown, rien ne s'affiche.

<script>let ajaxify = new Ajaxify({elements: '#contenu, #header, #login-form-16'});</script>
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>​
<script>  
document.addEventListener('DOMContentLoaded', () => {const player = new Plyr('#player', autoplay: true )});
window.player = player;

  var audio=document.createElement('audio');
  var first=true;
  window.addEventListener('mousedown',onmousedown);

   function onmousedown(){
   alert('mousedown');
   if(!first) return;
   first=false;
   player.volume= 0.5;
   player.play();
   }

    function on(selector, type, callback) {
    document.querySelectorAll(selector).forEach(element => {
    element.addEventListener(type, callback, false);
    });
    }​

      on('.player-src', 'click', function() {
    const src = this.dataset.src;
    const type = 'audio/' + this.dataset.type;

    player.source = {
      type: 'audio',
      title: 'Accompagnement',
      sources: [
        {
          src: src,
          type: type,
        },
      ],
    };
    player.play();
  });
});
</script>​

[daneel]

Malheureusement, pas le temps ce week-end.

Pour faire simple, voici un exemple auquel j'ai ajouté la lecture de video mp4 en local et des videos youtube.

<script>let ajaxify = new Ajaxify({elements: '#contenu, #header, #topa, #login-form-16'});</script>
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script>
   document.addEventListener('DOMContentLoaded', () => {
   const player = new Plyr('#player', {
   });
   window.player = player;

   var audio=document.createElement('audio');
   var first=true;
   window.addEventListener('mousedown',onmousedown);

   function onmousedown(){
   if(!first) return;
   first=false;
   player.volume= 0.5;
   player.play();
   }

   function on(selector, type, callback) {
   document.querySelectorAll(selector).forEach(elemen t => {
   element.addEventListener(type, callback, false);
   });
 }

   on('.player-src', 'click', function() {
   const src = this.dataset.src;
   const type = this.dataset.type;
   const poster = this.dataset.poster;
   const currentTime = this.dataset.currentTime;

   if (type === 'youtube') {
   player.source = {
   type: 'video',
   sources: [
   {
   src: src,
   provider: 'youtube',
   },
   ],
   title: '',
   };
   } else {
   player.source = {
   type: type === 'mp4' ? 'video' : 'audio',
   title: 'Example title',
   sources: [
   {
   src: src,
   type: type === 'mp3' ? 'audio/mp3' : 'video/mp4',
   },
   ],
   };
   }

   // Définir le poster pour les vidéos locales et YouTube
   if (poster) {
   player.poster = poster;
   }

   // Définir la currentTime pour démarrer la vidéo/audio à un temps spécifique
   if (currentTime) {
   player.on('ready', () => {
   player.currentTime = currentTime;
   player.play();
   });
   } else {
   player.play();
}
});

});

</script>
<script src='https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.inclu des,CustomEvent,Object.entries,Object.values,URL'> </script>​

Tu peux voir une demo :

https://ajaxify.joomla.com/

avec :
- des liens audio, video et youtube
- le lancement au clic. Attention, si l'utilisateur stoppe l'audio, le changement de page relancera la lecture au premier clic sans toutefois le dupliquer.
- le currenttime permet de lancer à un temps donné
- je n'ai pas réglé pour le metismenu donc les sous-menus seront probablement désactivés
- j'ai pris en compte les modules en top-a, ainsi tu as les 3 modules assignés uniquement sur la page d'accueil

Le forum peut avoir converti le code, tu peux toutefois le récupérer depuis la démo en cliquant sur le bouton droit > code source de la page.

Il faudrait prendre du temps pour en faire une extension spécifique pour ajaxify
ainsi que plyr si on veut plus de personnalisation sans entrer dans le code.

[RobertG]

Merci Yann !
La copie depuis ta citation, puis la suppression des espaces en trop (elemen t par exemple) ne donnant toujours pas le fonctionnement attendu, j'ai récupéré directement le code dans le site exemple, en effet, et là, ça fonctionne.
En ce qui concerne l'arrêt par le visiteur, la reprise automatique ne se fait pas au premier clic dans la page (menu ou pas) mais au clic suivant, avec un autre inconvénient : le son repart au niveau défini dans le script (testé sur le site exemple sur mon smartphone, mon site étant en local).

Bon week-end !

[daneel]

Merci Yann !
En ce qui concerne l'arrêt par le visiteur, la reprise automatique ne se fait pas au premier clic dans la page (menu ou pas) mais au clic suivant, avec un autre inconvénient : le son repart au niveau défini dans le script (testé sur le site exemple sur mon smartphone, mon site étant en local).

ok merci pour le retour, tu peux tester les petites modifications du script
sur https://ajaxify.joomla.com ?

Autant le copier à partir du code source de la page.

[RobertG]

Merci Yann, il n'y a plus de redémarrage après arrêt, et le fonctionnement de la lecture est parfait au changement de page.
Le clic déclenche bien la lecture.
Il faut que je teste en local avec un gestionnaire de cookies (ça fonctionne avec un simple pop-up Engagebox), mais une fois que le visiteur aura validé et qu'il partira puis reviendra, il manquera le clic. Il faut que je trouve une astuce.

[RobertG]

Bonjour,

La méthode a été appliquée à la version en ligne, elle fonctionne.
Cependant, il faudrait que le son ne soit pas déclenché sur les petits écrans. Je peux masquer le module par un display:none, mais comme il est toujours publié, le son démarre et faute de module visible, on ne peut l'arrêter.
Je ne me souviens pas comment faire pour le désactiver.

[daneel]

Bonjour,
Je ne me souviens pas comment faire pour le désactiver.

Bonsoir,

Tu peux voir la démo.... https://ajaxify.joomla.com

il suffit d'insérer dans le code js la détection au clic uniquement si la résolution est supérieur ou égale à 969px ).

Si tu réduit ta fenêtre sur écran desktop, il faudra rafraichir la page pour vérifier que la lecture ne se déclenche pas automatiquement.
Tu peux aussi vérifier sur smartphone.

    var screen = parseInt(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);

    if (screen >= 969) {      
    document.addEventListener('mousedown', () => {
      if (first) {
        first = false;
        player.volume=0.2;
        player.play();
      }
    });            
    }​

​

Je te conseille de voir le code source de la demo pour eviter les erreurs de copier/coller sur le forum.

[RobertG]

Un grand merci, Yann !

[RobertG]

Bonjour,

Effet indésirable du script : le menu hamburger correspondant au menu de gauche du site ne se referme pas sur petits écrans lorsque ce code est présent. Utiliser le fichier index.php de Cassiopeia au lieu de celui du template enfant, donc sans l'automatisation du son, permet à ce menu de se refermer.
Y a-t-il une solution ?

[RobertG]

Bonjour,

Je croyais avoir réussi à gérer la question de la fermeture du menu en désactivant l'appel au script Ajaxify sur les écrans de largeur inférieure à 992 px.

J'ai testé sur Firefox (Android) et ça fonctionne (pas de son et le menu se referme), mais pas sur Chrome, le navigateur Samsung ni Opera où le menu ne se rétracte pas et le son se joue, alors que sur l'écran de mon PC, la réduction de largeur d'écran du navigateur, suivie d'un rafraîchissement pour faire prendre en compte cette nouvelle largeur dès que le menu passe en hamburger, annule bien le son et referme bien le menu sur Firefox, Chrome, Edge et Opera.

J'ai essayé de désactiver le script Plyr de la même manière, mais rien ne change sur Chrome/Android, et je ne suis pas sûr qu'on puisse insérer la condition de taille entre "<script" et "src=".

Et sur IPhone, le contenu principal de la page s'affiche sur un quart gauche de l'écran au lieu de prendre la largeur de celui-ci.

Il reste donc à trouver comment neutraliser les différentes balises de script gérant le son, ou redéfinir le template pour les petits écrans !

[RobertG]

Pour info :

<script>
    var screen = parseInt(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
    if (screen >= 992) {
        let ajaxify = new Ajaxify({elements: '#contenu, #header, #topa, #navbar110, #login-form-16'});
    } else {
        return;
    }
</script>    ​

Ce code joue une fraction de seconde le début du fichier son puis quitte en coupant ce sont, et le menu se ferme.

Alors j'ai tenté :

<script>
    var screen = parseInt(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
    if (screen < 992) {
        return;
    }
</script>    ​

et il semble que ce soit la solution sous Android, reste à vérifier sur IPhone.

[RobertG]

Bonjour,

"return" n'est pas apprécié par le navigateur, alors j'ai fait autrement

<script>
    var screen = parseInt(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
    if (screen >= 992) {
        let ajaxify = new Ajaxify({elements: '#contenu, #header, #topa, #navbar110, #login-form-16'});
    } else {
    }
</script>    
​

mais il y a maintenant ce message dans la console lors d'un changement de page

Uncaught SyntaxError: redeclaration of let player

Par ailleurs, lorsqu'on tente de modifier un module personnalisé ou un article depuis le site, la zone d'édition s'affiche en mode code, et il faut recharger par F5 (au moins) pour voir s'afficher l'éditeur en mode normal.
Ensuite, la sauvegarde revient sur le mode code, F5 renvoie hors de l'édition et l'ajout/modification n'est pas enregistré.
L'administration ne posant pas de problème à ce niveau, j'en déduis que c'est un conflit avec ce script.

[daneel]

Bonjour Robert,

Apparemment tu recharge le script...
désolé avec la rentrée je n'ai pas trop de temps.

Tu peux tout simplement poser la question à Arvind, le dev d'ajaxify.

https://github.com/arvgta/ajaxify/issues

https://github.com/arvgta

https://4nf.org/

[RobertG]

Merci Yann,

Je crois qu'on va en rester là. Mon client veut le son, il accepte d'aller faire les modifications côté administration. L'erreur de console ne perturbe pas le site.