10617 sujets

JavaScript, DOM et API Web HTML5

Bonjour.

Je m'initie au JQUERY, mais je cale sur le problème rencontré actuellement avec le lecteur HTML5 avec playlist que j'essaie d'ajouter à une page Web (http://devblog.lastrose.com/html5-audio-video-playlist/) : le code JQUERY que j'utilise a été trouvé sur le Web, mais mon souci provient qu'avec certains navigateurs (EDGE par ex), la lecture se lance dès le chargement de la page, ce que je voudrais éviter.

HTML
<div id="bloc-audio">
<audio id="audio-playlist" preload="auto" tabindex="0" controls autoplay="false" style="width: 200px; height: 25px;">
  <source src="../Mus/musique01.mp3">
</audio>
<div id="cont-playlist">
<ul id="playlist">
    <li class="active">
        <a href="../Mus/musique01.mp3">
            Chanson01
        </a>
    </li>
    <li>
        <a href="../Mus/musique02.mp3">
            Chanson02
        </a>
    </li>
    <li>
        <a href="../Mus/musique03.mp3">
            Chanson03
        </a>
    </li>
</ul>
</div>
</div>


JQUERY
$(document).ready(function () {
	init();
	function init(){
		var current = 0;
		var audio = $('#audio-playlist');
		var playlist = $('#playlist');
		var tracks = playlist.find('li a');
		var len = tracks.length - 1;
		audio[0].volume = .20;
		audio[0].play();
		playlist.on('click','a', function(e){
			e.preventDefault();
			link = $(this);
			current = link.parent().index();
			run(link, audio[0]);
		});
		audio[0].addEventListener('ended', function(e){
			current++;
			if(current == len){
				current = 0;
				link = playlist.find('a')[0];
			}else{
				link = playlist.find('a')[current];    
			}
			run($(link),audio[0]);
		});
	}
	function run(link, player){
			player.src = link.attr('href');
			par = link.parent();
			par.addClass('active').siblings().removeClass('active');
			player.load();
			player.play();
	}
});

Je ne mets pas le CSS, je ne pense pas qu'il soit essentiel à ma question.

Y aurait-il une bonne âme qui sache m'expliquer pourquoi avec certains navigateurs la lecture démarre dès le chargement de la page ? Et comment faut-il y remédier ?

Merci beaucoup. Smiley smile
Modifié par Piteur511 (21 Oct 2019 - 22:45)
Piteur511 a écrit :


Y aurait-il une bonne âme qui sache m'expliquer pourquoi avec certains navigateurs la lecture démarre dès le chargement de la page ? Et comment faut-il y remédier ?


Et l'eau,

jquery write less do more ? Smiley ravi

    <audio src="http://www.archive.org/download/bolero_69/Bolero.mp3" id="audio" preload="auto" controls></audio>
    <ul id="playlist">
        <li class="active"><a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a></li>
        <li><a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a></li>
        <li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a></li>
        <li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">patrikbkarl chamber symph</a></li>
    </ul>


window.addEventListener('DOMContentLoaded', ()=>{
            (()=>{
                let $audio = document.getElementById('audio'),
                    $songsA = Array.from(document.querySelectorAll('#playlist a'));
                $songsA.forEach(($song)=>{
                    $song.addEventListener('click',(e)=>{
                        $songsA.forEach(($song)=>{
                            $song.parentNode.classList.remove('active');
                        });
                        $song.parentNode.classList.add('active');
                        $audio.src = $song.href;
                        $audio.play();
                        e.preventDefault();
                    })
                });
            })()
        })


Pour répondre à ta question

function init(){
//...
audio[0].play();
//...

Modifié par niuxe (22 Oct 2019 - 00:29)
Ouahou ! Je teste ça dans la journée ! C'est pour une bonne part "illisible" pour moi, mais je vais quand même me plonger dans ce code... Une découverte, au passage (non sans voir fait des recherches pour comprendre :
()=>{ VAUT function(){ (si je ne me suis pas trompé... !)

En tout cas, merci beaucoup !

Quant à
function init(){
//...
audio[0].play();
//...

je suppose que c'est Edge qui fait des siennes : malgré la présence de autoplay="false" dans la balise <audio>, malgré // devant la ligne javascript, la lecture démarre dès le chargement de la page ! Smiley decu
Modifié par Piteur511 (22 Oct 2019 - 01:41)
Administrateur
Bonjour,

que se passe-t-il en enlevant complètement l'attribut autoplay dans le code HTML ? Et sans lancer la lecture via du code JS bien entendu Smiley smile Est-ce qu'Edge se comporte comme les autres ou pas ?

Quelle version d'Edge : la nouvelle à base de Chromium ou Edge 12-18 ?

EDIT : la notation => s'appelle arrow function expression ou fonction fléchée (MDN, pas le plus didactique AMHA)
Modifié par Felipe (22 Oct 2019 - 09:50)
Meilleure solution
Bingo, Felipe ! Suppression de autoplay="false", plus de lancement automatique sous EDGE (pour info : Microsoft Edge 44.17763.771.0 — j'ignore s'il y a du Chromium ou pas dans cette version, mais Opera et Vivaldi ne bronchent pas avec autoplay="false", et, sauf erreur, ils sont sur base Chromium, non ?)

Quant à Firefox, Opera et Vivaldi, ils ne se formalisent pas de la suppression de autoplay="false" !

Encore merci !
Administrateur
J'ai la même version d'Edge donc c'est pas encore Chromium. Je demandais surtout pour savoir si ça concernait Edge "depuis tout le temps" (v12-18) ou dû au passage à un nouveau moteur et dans ce cas, forcément au début il y a des bugs.
J'ignore quelle est la frontière entre Chromium commun à Chrome, Opera, etc et la couche ajoutée par chaque vendor : MS a viré une cinquantaine de (fonctionnalités pouvant aussi servir de) potentiels "mouchards" pour ne prendre qu'un exemple. Mais c'est un gros mastodonte un navigateur Smiley smile
Felipe a écrit :
MS a viré une cinquantaine de (fonctionnalités pouvant aussi servir de) potentiels "mouchards" pour ne prendre qu'un exemple.

Chromium aurait des mouchards potentiels ? Première nouvelle (pour moi)... Chrome, je ne dis pas, mais Chromium ?

De toute façon, il y a des chances que de nouveaux mouchards soient installés par M$, non ? Smiley smile Mais c'est un autre débat...
Modifié par Piteur511 (23 Oct 2019 - 14:01)
Felipe a écrit :

J'ignore quelle est la frontière entre Chromium commun à Chrome


J'arrive un peu plus tard mais bon ces jours ci ont été bien rempli et c'est pas terminé....

Bref, normalement, Chromium est open source et sa version est n -1 ou n -2.

Piteur511 a écrit :

je suppose que c'est Edge qui fait des siennes : malgré la présence de autoplay="false" dans la balise &lt;audio&gt;, malgré // devant la ligne javascript, la lecture démarre dès le chargement de la page ! Smiley decu


Je ne pense qu'il fasse des siennes. Il suit un scénario logique :
- autoplay false
- lancement/chargement du script : audio.play()
Modifié par niuxe (23 Oct 2019 - 23:24)