[Résolu] Player HTML5 +Javascript +Comment utiliser addEventListener ?

Bonjour tout le monde,

Je suis entrain de créer un player audio HTML5 + javascript + CSS et je dois dire que je ne maitrise pas totalement Javascript.

Je cherche le moyen de lancer automatiquement l'audio suivant quand celui en cours se termine. Après moultes recherches, j'ai compris que je devais utiliser addEventListener, mais malgrès la lecture de différents cours sur le sujet, je crois que je l'utilise toujours mal.

Quelqu'un pourrait me dire ce qui ne va pas dans mon code s'il vous plait ?


Voici le code javascript

<script>
function loadSong(elt, e,idPlayer) {
if(!e) var e = window.event;
document.getElementById(idPlayer).src=elt.href;
document.getElementById(idPlayer).load();
document.getElementById(idPlayer).play();
return false;
}
 
window.onload = function() {
 
//init du player A
links = document.getElementById("playlist").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links[ i].onclick=function(e) { return loadSong(this, e,"player"); };
//je met un espace avant le i entre crochet sinon le code bugue dans alsacreations, mais y'a pas d'espace en vrai dans mon code
}
 
//init du player B
links = document.getElementById("playlist2").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links[ i].onclick=function(e) { return loadSong(this, e,"player2"); };
}
 
}
 
// Lancer l'audio suivant si l'audio en cours est fini pour le player A
document.getElementById(idPlayer).addEventListener('ended', function() { 
links = document.getElementById("playlist").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
i=i+1;                                      
links[ i]=function(e) { return loadSong(this, e,"player"); };
 
}     }  
, false);
 
</script>

Et mon code html

<div> <audio tabindex="0" id="player" controls="controls">Votre navigateur ne reconnaît pas la balise audio HTML5</audio>
<ul id="playlist">
  <li><a href="http://monnaielibre.creationmonetaire.info/wp-content/uploads/2014/01/Monnaie_Libre_49.ogg">Monnaie Libre N°49</a></li>
  <li><a href="http://monnaielibre.creationmonetaire.info/wp-content/uploads/2014/01/Monnaie_Libre_48.ogg">Monnaie Libre N°48</a></li>
  <li><a href="http://monnaielibre.creationmonetaire.info/wp-content/uploads/2014/01/Monnaie_Libre_47.ogg">Monnaie Libre N°47</a></li>
  <li><a href="http://monnaielibre.creationmonetaire.info/wp-content/uploads/2014/01/Monnaie_Libre_46.ogg">Monnaie Libre N°46</a></li>
</ul>
</div>
 
</br></br>
 
<div> <audio tabindex="0" id="player2" controls="controls">Votre navigateur ne reconnaît pas la balise audio HTML5</audio>
<ul id="playlist2">
  <li><a href="http://monnaielibre.creationmonetaire.info/wp-content/uploads/2014/01/Monnaie_Libre_49.ogg">Monnaie Libre N°49</a></li>
  <li><a href="http://monnaielibre.creationmonetaire.info/wp-content/uploads/2014/01/Monnaie_Libre_48.ogg">Monnaie Libre N°48</a></li>
  <li><a href="http://monnaielibre.creationmonetaire.info/wp-content/uploads/2014/01/Monnaie_Libre_47.ogg">Monnaie Libre N°47</a></li>
  <li><a href="http://monnaielibre.creationmonetaire.info/wp-content/uploads/2014/01/Monnaie_Libre_46.ogg">Monnaie Libre N°46</a></li>
</ul>
</div>

Merci d'avance
Modifié par babetine (08 Jun 2014 - 21:57)

Bon, j'avance dans ma réflexion, enfin je crois... Je pense que je dois ajouter mon code d'enchainement des morceaux dans celui de l'initialisation du player.

Pour l'instant c'est pas concluant, mais j'ai l'impression d'être sur la bonne voie...

Donc là je teste des trucs sur l'initialisation du player2 :

<script>
function loadSong(elt, e,idPlayer) {
if(!e) var e = window.event;
document.getElementById(idPlayer).src=elt.href;
document.getElementById(idPlayer).load();
document.getElementById(idPlayer).play();
return false;
}
 
window.onload = function() {
 
//init du player A
links = document.getElementById("playlist").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links[ i].onclick=function(e) { return loadSong(this, e,"player"); };
//je met un espace avant le i entre crochet sinon le code bugue dans alsacreations, mais y'a pas d'espace en vrai dans mon code
}
 
//init du player B
links = document.getElementById("playlist2").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links[ i].onclick=function(e) { return loadSong(this, e,"player2"); };

 // On passe à la musique suivante
document.getElementById('player2').addEventListener("ended",function() {
i = i + 1;
loadSong(this, e,"player2"); }, false);
}

}
 
</script>

Comme ça je suis toujours dans la boucle "for". L'idée c'est que quand je clique sur un morceau, il se joue (ça ça marche) et qu'ensuite, tant qu'il y a d'autres morceaux dans la playlist, le suivant se lance automatiquement (ça, ça ne marche pas encore).

Bonjour,

1) A propos de ton test de mon exemple avec un player unique qui ne marche pas : il faut rajouter "id="source" à l'élément <source> du player parce que je l'utilise ensuite dans le code javascript pour y mettre le morceau suivant une fois le morceau précédent fini (mea culpa, je n'avais pas mis le code html correspondant).

2) A propos de la mise à disposition d'une playlist dans le cas où on met plusieurs audio en cachant ceux qui ne jouent pas : rien ne t'empêche de rajouter en plus, en dessous des balises audio des players, ta liste <ul> qui contient tous tes liens. Ceci étant, au lieu de liens, tu pourrais plutôt mettre des <button> avec chacun un "onclick" dont la fonction associée démarrera le player correspondant si on clique sur le bouton.

3) A propos de "addEventListener" : utilise "addEventListener" préférentiellement à tout autre méthode. "addEventListener" est désormais bien supporté partout et on n'a plus besoin de bricoler comme auparavant. Note surtout que les navigateurs qui sont capables de gérer la balise audio (qui est la clé de voute de ton projet) comprennent (tous?) "addEventListener". Du coup, les solutions de type "addLoadEvent" n'ont pas d'intérêt selon moi dans ton cas.

2) A propos des closures : c'est sûr que dès qu'on a un code un peu complexe avec gestion d'évènements, timeout, ..., on peut avoir des problèmes de visibilité de variables et de passage de paramètres. Personnellement, et même si c'est considéré (avec raison) par certains comme étant non orthodoxe, je préfèrerai ici simplifier pendant la phase de validation du concept et ajouter l'information dans l'élément HTML audio lui-même (en choisissant un nom d'attribut suffisamment exotique pour ne pas risquer d'écraser la valeur d'un attribut préexistant). C'est ce que j'ai fait dans mon dernier exemple (player unique) en rajoutant l'attribut "currentInTheList" à l'élément audio. En ajoutant éventuellement d'autres attributs, ça permet de savoir à tout moment qui joue quoi et ce qu'il faut arrêter ou démarrer dans les cas complexes où on jongle par exemple entre deux players, et où l'utilisateur peut démarrer à tout moment un autre morceau en cliquant sur l'autre player ou dans une liste de morceau à part. Mais en production, je crée en général un objet global pour l'ensemble du code. Dans cet objet, on peut stocker toutes les informations qu'on veut sous forme de propriétés de l'objet, propriétés contenant éventuellement des références à d'autres objets dans les cas complexes. Du coup, on a accès depuis n'importe quelle fonction à ces informations (toutes les fonctions du code étant elles-même des méthodes de l'objet ou d'objets référencés dans l'une des propriétés de l'objet global).

5) A propos du preload des morceaux : ok, je comprends que tu ne souhaites pas précharger tous tes morceaux dès l'affichage initiale de la page. Pour ce qui est des temps de latence entre deux morceaux quand on utilise un player pour plusieurs morceaux, tu peux éventuellement utiliser 2 players, l'un qui joue, et pendant ce temps, l'autre qui précharge le morceau suivant.

Amicalement,
Modifié par parsimonhi (07 Jun 2014 - 13:22)

Bonjour,

A propos des attributs ajoutés à l’élément HTML audio : j'aurais plutôt dû mettre un nom commençant par "data-" qui est prévu par la standard HTML.

Dans ton code, tu pourrais donc utiliser un "data-k" pour stocker la valeur de i proprement.

Ton code devient (en supprimant au passage cet horrible addLoadEvent()) :

<script>
function loadSong(elt, e,player)
{
	if (!e) var e = window.event;
	document.getElementById(player).src=elt.href;
	document.getElementById(player).load();
	document.getElementById(player).play();
	return false;
}

function preparePlayer()
{
	var links = document.getElementById("playlist").getElementsByTagName("a");
	for (var z = 0; z<links.length; z++)
	{
		links[z].onclick=function(e) { return loadSong(this, e,"player"); };
		// On passe a la musique suivante
		document.getElementById('player').addEventListener("ended",function() {
			var k=this.getAttribute("data-k");
			if (k > 0) k = k - 1; else k = links.length;
			this.setAttribute("data-k",k);
			document.getElementById('player').src=links[k];
			document.getElementById('player').load();
			document.getElementById('player').play();
			}, false);
		document.getElementById('player').setAttribute("data-k",0);
	}
}

window.addEventListener("load",preparePlayer,false);
</script>

EDIT (08/06/2014) : ne pas utiliser ce code en l'état. Il n'est pas complètement débogué. Il faudrait ajouter un parseInt autour du getAttribute, il faudrait soustraire 1 de links.length à la ligne if (k > 0) k = k - 1; else k = links.length;, il faudrait rajouter un .href à links[k], et il faudrait sortir le addEventListener concernant l'évènement "ended" de la boucle pour un meilleur fonctionnement.

Amicalement,
Modifié par parsimonhi (08 Jun 2014 - 09:32)

Ouaou, tu es prolifiques !

Alors je récapitule :

- ta première version du player (sans onclick dans le code) : http://blogsaudio.dmmworld.com/PLAYERhtml5/nouvelessai01.php
enchainement : oki
onclick : non
boucle : oui (mais qu'elle y soit ou pas m'est égal)

- ta seconde version (avec onclick et "data-k") : http://blogsaudio.dmmworld.com/PLAYERhtml5/nouvelessai02.php
enchainement : oki
onclick : non
boucle : non (mais qu'elle y soit ou pas m'est égal)

En tout cas tu m'aides à simplifier grandement le code, et je comprend comment ça fonctionne, y'a du progrès

Bonjour,

Bon, je me demande quand on va y arriver !

J'ai rajouté un addEventListener pour l'event "play" de l'élément audio afin de faire une action à chaque fois que le player commence à jouer un morceau (l'idée étant d'une part de stocker dans l'attribut "data-k" l'indice du morceau qui va être joué à ce moment là, et éventuellement d'indiquer quel morceau est en cours de lecture dans la liste des morceaux : j'ai pour l'instant juste changé la couleur du texte de gris à noir, mais ça peut être tout ce qu'on veut). En faisant ça, on sait quel morceau est joué même quand l’utilisateur clique directement dans la liste des morceaux. Le fonctionnement global devient plus robuste.

Il n'est pas bon d'utiliser dans les fonctions qui sont en paramètre des addEventListener le paramètre i qui est un indice de boucle, car celui-ci y prendra la valeur qu'il a en fin de boucle systématiquement.

J'ai aussi fait en sorte qu'on passe toujours par la fonction loadSong quelque soit la manière qu'on utilise pour faire commencer un morceau (soit en cliquant sur le player, soit quand il démarre à la suite d'un autre, soit quand on clique dans la liste des morceaux). J'ai du coup modifié un peu cette fonction pour qu'on puisse l'appeler de n'importe où.

J'ai aussi remplacé i par z pour ne plus avoir à penser à modifier les i entre crochets qui ont pour effet de mettre le texte en italique.

Voilà ce que ça donne :

function loadSong(link,playerId)
{
	var player=document.getElementById(playerId);
	player.src=link.href;
	player.load();
	player.play();
}

function preparePlayer()
{
	var links=document.getElementById("playlist").getElementsByTagName("a");
	var player=document.getElementById('player');
	var z;
	for (z=0;z<links.length;z++)
		links[z].onclick=function(e) {loadSong(this,"player");return false;};
	player.addEventListener("play",function() {
		var k,km=links.length;
		for (k=0;k<km;k++)
		{
			if (this.src==links[k].href)
			{
				this.setAttribute("data-k",k);
				links[k].style.color="black";
			}
			else links[k].style.color="grey";
		}
	},false);
	player.addEventListener("ended",function() {
		var k=parseInt(this.getAttribute("data-k"));
		if (k<(links.length-1)) k++;else k=0;
		loadSong(links[k],"player");
	},false);
}

window.addEventListener("load",preparePlayer,false);

EDIT (08/06/2014) : correction d'une grosse étourderie dans le code de preparePlayer(), mais qui n'avait cependant aucune conséquence sur le résultat (j'avais initialement laissé trainer les player.addEventListener() dans la boucle for (z=0;z<links.length;z++) ... ce qui n'avait pas de sens).

Amicalement,
Modifié par parsimonhi (08 Jun 2014 - 00:30)

Ah ben non, pas encore, pffff lollll

Problème : si on clique directement sur les audios de la playlist, celui cliqué et celui d'avant sont en rouge

Bonjour,

Ton problème pour le premier morceau semble dû au fait que dans le HTML, tu mets ton source audio dans une balise <source>. Si tu mets directement le source audio comme valeur de l'attribut src de la balise audio, je pense que mon code marchait en l'état même pour le premier morceau.

<audio tabindex="0" id="player" preload="auto" controls="controls" src="PLAYERclosureAUDIOS/01.mp3">

Si tu mets le source comme valeur de l'attribut src de la balise <source> (ce qui est sans doute mieux d'ailleurs), dans ce cas, il faut modifier le code javascript en faisant référence à l'endroit où est ce source : partout où on a un player.src ou this.src, on peut mettre respectivement un player.getElementsByTagName("source")[0].src ou this.getElementsByTagName("source")[0].src (si tu mets un id="source" à <source> comme c'est le cas dans ton exemple, tu peux aussi utiliser document.getElementById("source").src).

La modification que tu as faites revient à ça, mais pour le premier morceau seulement.

Amicalement,

PS: concernant mon âge et ma profession, disons que je suis un vieux geek qui a fait beaucoup d'informatique, mais qui fait complètement autre chose actuellement.

Bonjour,

Si tu souhaites mettre en rouge le premier morceau choisi par l'internaute (que ce soit en cliquant sur le bouton play du lecteur audio, ou en cliquant sur un morceau de la liste), en noir le morceau en cours de lecture (si ce n'est pas le premier choisi par l'internaute), et en gris les autres, il faut encore un peu modifier le code en gardant la trace du premier morceau choisi dans un attribut supplémentaire de la balise audio, attribut que j'ai appelé "data-0" dans le code ci-dessous (cette fois-ci, j'ai mis le html pour qu'il n'y ait pas d'ambiguïté). Il y a deux endroits où il faut donner une valeur à "data-0" : à la fin de preparePlayer() (cas où l'internaute clique sur le bouton "play" du lecteur audio sans jamais avoir sélectionné de morceau dans la liste avant), et dans la fonction onclik() (cas où l'internaute clique sur un morceau de la liste). Ensuite, on utilise la valeur de "data-0" dans la fonction exécutée à chaque évènement "play" pour savoir quel lien doit être en rouge.

<div> 
<audio tabindex="0" id="player" preload="auto" controls="controls">
		<source id="source" src="PLAYERclosureAUDIOS/01.mp3">
	Votre navigateur ne reconnaît pas la balise audio HTML5
</audio>
	<ul id="playlist">
		<li><a href="PLAYERclosureAUDIOS/01.mp3">Audio 1</a></li>
		<li><a href="PLAYERclosureAUDIOS/02.mp3">Audio 2</a></li>
		<li><a href="PLAYERclosureAUDIOS/03.mp3">Audio 3</a></li>
		<li><a href="PLAYERclosureAUDIOS/04.mp3">Audio 4</a></li>
		<li><a href="PLAYERclosureAUDIOS/05.mp3">Audio 5</a></li>
		<li><a href="PLAYERclosureAUDIOS/06.mp3">Audio 6</a></li>
		<li><a href="PLAYERclosureAUDIOS/07.mp3">Audio 7</a></li>
		<li><a href="PLAYERclosureAUDIOS/08.mp3">Audio 8</a></li>
		<li><a href="PLAYERclosureAUDIOS/09.mp3">Audio 9</a></li>
		<li><a href="PLAYERclosureAUDIOS/10.mp3">Audio 10</a></li>
	</ul>
</div>

<script>
function loadSong(link,playerId)
{
	var player=document.getElementById(playerId);
	player.getElementsByTagName("source")[0].src=link.href;
	player.load();
	player.play();
}

function preparePlayer()
{
	var links=document.getElementById("playlist").getElementsByTagName("a");
	var player=document.getElementById('player');
	var z;
	for (z=0;z<links.length;z++)
		links[z].onclick=function(e)
		{
			var k,km=links.length;
			for (k=0;k<km;k++)
				if (this==links[k])
					{player.setAttribute("data-0",k);break;}
			loadSong(this,"player");
			return false;
		};
	player.addEventListener("play",function() {
		var k,km=links.length,x;
		x=parseInt(this.getAttribute("data-0"));
		links[x].style.color="red";
		for (k=0;k<km;k++)
		{
			if (this.getElementsByTagName("source")[0].src==links[k].href)
			{
				this.setAttribute("data-k",k);
				if (k!=x) links[k].style.color="black";
			}
			else
			{
				if (k!=x) links[k].style.color="grey";
			}
		}
	},false);
	player.addEventListener("ended",function() {
		var k=parseInt(this.getAttribute("data-k"));
		if (k<(links.length-1)) k++;else k=0;
		loadSong(links[k],"player");
	},false);
	player.setAttribute("data-0",0);
}

window.addEventListener("load",preparePlayer,false);
</script>

Amicalement,
Modifié par parsimonhi (08 Jun 2014 - 12:06)