[RÉGLÉ] Jouer un fichier audio sans relancer au changement de page ?

[RobertG]

Bonjour,

La réponse 9 de @daneel à la discussion https://forum.joomla.fr/forum/joomla...as-qd-on-surfe m'a intéressé, est-elle toujours d'actualité ?

Il est possible que j'aie besoin de reproduire un tel fonctionnement sur un site J4, le propriétaire du site avait du code inséré dans le fichier index.php de son template J3, mais perso, je n'entends pas de son et j'imagine que ça devait fonctionner avant J3 et pas en J3.

La seule extension qui semblerait utilisable pour cette diffusion continue serait JBGMusic, mais elle n'a pas été mise à jour depuis un peu moins de 3 ans.
Y aurait-il une alternative simple ?

Par ailleurs, il semble que malgré l'instruction autoplay (testé avec Allvideos sur Firefox et Chrome) la lecture de mp3 ne démarre pas immédiatement.

Merci de vos conseils

PS : je viens de tester en local sur un site J4 en PHP 8.1, le lecteur se met en pause lors du changement et nécessite de cliquer pour que le fichier continue à être lu (contrairement à ce que l'on voit sur le site de l'auteur).

[RobertG]

Serait-il possible de changer de section ? j'ai posté en J3 et ça concerne J4
Merci !

[daneel]

Bonjour,

La réponse 9 de @daneel à la discussion https://forum.joomla.fr/forum/joomla...as-qd-on-surfe m'a intéressé, est-elle toujours d'actualité ?

La seule extension qui semblerait utilisable pour cette diffusion continue serait JBGMusic, mais elle n'a pas été mise à jour depuis un peu moins de 3 ans.
Y aurait-il une alternative simple ?

Par ailleurs, il semble que malgré l'instruction autoplay (testé avec Allvideos sur Firefox et Chrome) la lecture de mp3 ne démarre pas immédiatement.

Merci de vos conseils

Tu expose plusieurs problèmes donc :

1. oui c'est toujours d'actualités ( dernière version il y a 2 mois) et cela fonctionne avec youtube par exemple. Désolé pour l'abandon de la demo, joomla.com oblige l'administrateur du site à se reconnecter chaque mois et c'était uniquement dans le but de la démonstration.

2. l'autoplay est assez perturbant et peut être bloqué.

En règle générale, la lecture automatique d'un média video ou audio ne sera autorisée que si au moins l'une des conditions suivantes est remplie :

• le son est coupé ou le volume est réglé sur 0
• L'utilisateur a interagi avec le site (en cliquant, en tapant, en appuyant sur des touches, etc.)
• Si le site a été mis sur liste d'autorisation ; cela peut se produire soit automatiquement si le navigateur détermine que l'utilisateur interagit fréquemment avec les médias, soit manuellement par le biais des préférences ou d'autres fonctions de l'interface utilisateur. Si la politique d'autorisation de lecture automatique est utilisée pour accorder la prise en charge de la lecture automatique.

Dans le cas contraire, la lecture sera probablement bloquée. Les situations exactes qui entraînent un blocage, et les spécificités de la manière dont les sites sont mis sur liste d'autorisation, varient d'un navigateur à l'autre, mais les indications ci-dessus sont de bonnes lignes directrices à suivre.

3. Pratiquement tous les modules fonctionnent sans coupure. J'utilise indépendamment plyr (le script implanté dans "up" de lomart ) en audio ou en video et je n'ai pas de problème

[ EDIT : sujet déplacé sous Joomla 4 ]

[RobertG]

Merci beaucoup pour cette réponse.

Hier j'ai donc testé avec JBGMusic (sans cet ajout de code) : pour que le son reprenne où il s'est arrêté, il faut cliquer sur la page ou taper sur une touche du clavier.
Avec Allvideos, le son s'arrête au changement de page et ne reprend depuis le début que si on clique pour le redémarrer.
Dans les deux cas, il s'agit de lire des fichiers audio locaux.

J'ai donc suivi les quatre étapes sur un template enfant, tout est en place.
Je viens de tester avec JBGMusic : le son semble se dupliquer au changement de page, ça fait un écho désagréable pour un texte parlé, c'est moins gênant pour des chants d'oiseaux. Ah, un truc bizarre : le lecteur disparaît au changement de page (aucune trace de son code dans le code-source après changement), il ne reste que son titre dans la colonne. Impossible donc de mettre le son à 0 après changement de page.
Essai avec Allvideos : c'est mieux pour le son, mais impossible d'arrêter celui-ci dès que je change de page, bien que le lecteur soit visible en permanence, l'image du haut-parleur passe bien en mode barré, mais le son continue.
Cependant, dans les deux cas, les multiples changements de page semblent aussi multiplier la lecture du mp3.

Autre point qui se confirme : que ce soit sous Firefox ou Chrome, l'autoplay ne fonctionne pas, le démarrage est manuel.

Test avec UP, c'est nettement mieux, il n'y a pas de rupture, pas de double lecture, mais le module se duplique à l'écran à chaque changement de page, ce qui correspond aux multiples lectures des tests précédents. Autre point positif : la mise en pause ou la désactivation du son s'appliquent bien à toutes les instances.

[RobertG]

Bonjour,

lomart et daneel : avez-vous une idée de comment empêcher cette multiplication ?
Le code UP est inséré dans un module personnalisé placé en sidebar-left d'un template enfant de Cassiopeia, affiché sur toutes les pages (pour permettre l'arrêt) et sur un site local, pour tests

{up media_plyr=audio | mp3=images/audio/oiseaux2.mp3 | class=ombre w4 wm8 ws12}

Merci de vos conseils !

[daneel]

Il y a certainement un réglage à faire dans up car cela fonctionne très bien en utilisant le script plyr ( https://plyr.io/ ) de façon indépendante.

Pour te faire une idée (désolé, ce n'est pas très "propre" mais c'est pour t'expliquer)

Dans le fichier index.php de cassiopeia, j'insère les balises suivantes avant le </head> :

<script src="https://4nf.org/ajaxify.min.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />

​

et avant le </body>, j'insère les appels au fichiers js

<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> const player = new Plyr('#player');</script>

​

dans un nouveau module personnalisé placé dans la barre latérale de droite (sidebar-right) assigné sur toutes les pages

je colle le code suivant en mode "non-wysiwyg" (donc sans tinymce pour éviter que le code soit supprimé) :

<audio id="player" playsinline controls >
<source src="/images/audio/9509.mp3" type="audio/mp3" />
</audio >
​

J'ai créé un dossier audio dans images et j'ai collé le fichier mp3 récupéré de pixabay (licence cc0)

https://pixabay.com/fr/music/search/cc0/

Et hop j'embarque l'audio, je navigue entre les pages, les tags, les liens de menu en musique...

Voilà pour l'explication rapide, il faudrait faire un module ou un plugin pour améliorer cela mais tu as déjà l'idée.

[daneel]

Après voici un petit conseil... utilise un seul lecteur (player).
On utilise ensuite l'api pour le contrôler et c'est beaucoup plus simple !

Par exemple, j'insère ou je veux le player video puis dans un article où j'insère des evenements
pour lancer la video, changer, executer à un moment bien précis, etc. C'est la même chose pour l'audio.

Dans notre exemple... remplace le code posé avant le </body> par

<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');
  window.player = player;

  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: 'Example title',
      sources: [
        {
          src: src,
          type: type,
        },
      ],
    };

    player.play();
  });
});
</script>​
​

Dans le module personnalisé ajoute les évenements sous forme de boutons :
cela donne :

<audio id="player" playsinline controls >
<source src="/images/audio/9509.mp3" type="audio/mp3" />
</audio >
<p><button type="button" class="player-src btn btn-primary" data-type="mp3" data-src="/images/audio/9509.mp3">9509</button></p>
<p> <button type="button" class="player-src btn btn-secondary" data-type="mp3" data-src="/images/audio/green.mp3">green</button></p>
<p><button type="button" class="player-src btn btn-success" data-type="mp3" data-src="/images/audio/greensleeves.mp3">greensleeves</button></p>​

Il n'y a aucune coupure de lecture durant le changement de page.
Les evenements js peuvent être insérés dans les articles et lancer la lecture du fichier source.

Ce n'est pas obligé d'utiliser les boutons, on peut aussi faire sous forme de lien à condition d'avoir la classe player-src, le data-type et data-src.

Exemple :

<a href class="player-src" data-type="mp3" data-src="/images/audio/greensleeves.mp3">greensleeves</a>

[RobertG]

Merci Yann! Il va me rester à digérer tout ça !

Comme ça fonctionne bien avec UP (hormis pas de démarrage auto), j'ai tenté de masquer les lecteurs supplémentaires, sans succès.

[RobertG]

Bien,

J'ai suivi les conseils et inséré le code, puis créé le module personnalisé, mais pas compris l'utilité des boutons qui par défaut s'empilent. En les neutralisant, j'ai le lecteur seul

C'est parfait pour la lecture, pas de coupure entre les pages, pas de "stéréo" comme au début de mes essais.
Deux questions : peut-on essayer de lancer automatiquement le son depuis ce script ? Y a-t-il aussi une possibilité de réduire le volume par défaut (ici pour une musique de fond qui doit rester plus légère que le volume du lecteur audio du terminal) ?

Merci beaucoup, Yann !

[daneel]

reponse rapide, oui on peut définir autoplay et volume depuis ce que tu définis dans le js
const player = new Plyr('#player', autoplay: true });

mais la plupart des navigateurs récents bloquent l'autoplay car le consentement est obligatoire :



Je te confirme que cela fonctionne après avoir valider l'autorisation.

Ce consentement peut être détecté et demander d'activer,

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getAutoplayPolicy

Mais de mon avis, tu peux oublier l'autoplay. Ce serait dommage d'attendre le consentement pour que l'utilisateur navigue sur les pages.

edit : les boutons permettent de contrôler le player. Tu peux les inserer dans l'article ou ailleurs dans la page.
Tu peux charger une source différente donc de lire d'autres fichiers.

[RobertG]

Merci Yann, j'essaierai de faire comprendre ça à mon client

[daneel]

Merci Yann, j'essaierai de faire comprendre ça à mon client

une astuce consiste à faire cliquer une fois pour lancer la lecture.

Après :

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

Il suffit d'ajouter ces lignes suivantes :

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

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

A ta demande, j'ai ajouté également player.volume pour définir une valeur comprise entre 0 et 1 donc 0.2 est un volume sonore à 20%.
explication : j'attends le premier clic pour executer la lecture avec un volume à 0.2. Après le premier clic, la fonction est désactivée.
Si tu ajoute un popup avec un seul affichage, l'utilisateur va nécessairement devoir cliquer dessus donc il lancera la musique de fond même si la page n'autorise pas l'autoplay.
On contourne ainsi le problème.

[RobertG]

Merci pour ces solutions !

[RobertG]

Yann, j'ai inséré le code "var first..." entre la fonction "function on..." et "on('.player-src', 'click', function() {" mais le clic n'importe où ne déclenche pas la lecture. Le clic sur le lecteur est en revanche efficace.
J'ai dû faire une erreur de copie ?

<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');
  const player = new Plyr('#player', autoplay: true });
  window.player = player;

  function on(selector, type, callback) {
    document.querySelectorAll(selector).forEach(element => {
      element.addEventListener(type, callback, false);
    });
  }
    var first=true;
    window.addEventListener('mousedown',onmousedown);

    function onmousedown(){
    if(!first) return;
    first=false;
    player.volume= 0.2;
    player.play();
    }​
  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]

un oubli...

var audio=document.createElement('audio');

et l'ajout fonctionne également après windows.player = player

ce qui donne au début du 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.play();
   }

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

....