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

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