Bonjour ! et merci pour votre indulgence car je débute.
J'ai créé un player de musique qui marche en js + html et je voudrais que celui ci ne s'affiche que lorsqu'on clique sur une icône.
Je ne parviens pas à le faire et il ne se passe rien lorsque je mets un hover...
Merci à vous si vous avez une idée !
Voici mon code :
Javascript
HTML
Modifié par felindratetedetigre (17 Feb 2017 - 20:03)
J'ai créé un player de musique qui marche en js + html et je voudrais que celui ci ne s'affiche que lorsqu'on clique sur une icône.
Je ne parviens pas à le faire et il ne se passe rien lorsque je mets un hover...
Merci à vous si vous avez une idée !
Voici mon code :
Javascript
<script>
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 audioSource=document.getElementById("source");
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 (audioSource.src==links[k].href)
{
audioSource.src=this.src;
this.setAttribute("data-k",k);
links[k].style.color="#E9967A";
}
else if (this.src==links[k].href)
{
this.setAttribute("data-k",k);
links[k].style.color="#E9967A";
}
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);
</script>
HTML
<div id="MUSIC">
<audio tabindex="0" id="player" preload="auto" controls="controls">
<source id="source" src="musiques/Django_Reinhardt_La_Mer.ogg">
Votre navigateur ne reconnaît pas la balise audio HTML5
</audio>
<ul id="playlist">
<li><a href="musiques/Django_Reinhardt_La_Mer.ogg" onclick="loadSong()">Django Reinhardt - La mer</a></li>
<li><a href="musiques/Léo_Ferré_chante_Baudelaire_L_Albatros.ogg" onclick="loadSong()">Léo Ferré - L'Albatros (Baudelaire)</a></li>
</ul>
Modifié par felindratetedetigre (17 Feb 2017 - 20:03)