Plusieurs occurences lecteur audio html5

Bonjour
Novice en html5 et en js, je souhaite mettre deux (ou plus) lecteurs audio avecplaylist sur une même page html5
or dans tous mes essais, seul le 1er fonctionne correctement.
sur le 2eme, le lien du song renvoie a une lecture plein ecran et ne passe pas par le lecteur customisé par css.


script en head:

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

window.onload = function() {
links = document.getElementById("playlist").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links.onclick=function(e) { return loadSong(this, e); };
}
}
</script>

[b]player:

<ul class="signature">
             <div class="tittle"> lecture en ligne</div>
</ul>
<div> <audio tabindex="0" id="player" controls>balise audio HTML5 inconnue</audio>
<ul id="playlist">
  <li><a href="../datas/#">nom_song_1</a></li>
  <li><a href="../datas/##">nom_song_2</a></li>
</ul></div>

Y'a t'il moyen de rendre les deux lecteurs independants ?


[/i]

Salut Yeathly,

C'est normal ce qui se passe. Tes deux lecteurs utilisent les mêmes ID donc ton script ne peut pas faire la différence entre les deux. Normalement, en css, l'id d'une balise est censé toujours être unique.

Le plus simple est de donner des IDs différents à chaque lecteur et à chaque playlist et d'ajouter un paramètre à ta fonction pour indiquer à quel player elle est destinée.

Ca donnerait un truc du genre (pas testé) :

<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() {

//note : on peut faire beaucoup mieux que copier coller l'initialisation pour chaque lecteur mais je n'ai pas voulu compliquer si tu es débutant.

//init du player A
links = document.getElementById("playlistA").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links.onclick=function(e) { return loadSong(this, e,"playerA"); };
}

//init du player B
links = document.getElementById("playlistB").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links.onclick=function(e) { return loadSong(this, e,"playerB"); };
}

}
</script>

Et ensuite les deux players comme ça :

<!-- Player A -->
<div> <audio tabindex="0" id="playerA" controls>balise audio HTML5 inconnue</audio>
<ul id="playlistA">
  <li><a href="../datas/#">nom_song_1</a></li>
  <li><a href="../datas/##">nom_song_2</a></li>
</ul></div>

<!-- Player B -->
<div> <audio tabindex="0" id="playerB" controls>balise audio HTML5 inconnue</audio>
<ul id="playlistB">
  <li><a href="../datas/#">nom_song_1</a></li>
  <li><a href="../datas/##">nom_song_2</a></li>
</ul></div>

hello yann
Merci pour cette réponse, mais cependant une question me pose encore problème. A savoir tous les navigateurs n'acceptent pas les même formats audio firefox->ogg mais pas mp3. Alors comment faire avec ce système de playlist pour proposer au lecteur audio le bon format sans avoir de redondance de titre dans la playlist ? d'avance merci pour la réponse.