Discussion :

[felindratetedetigre]

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 <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>

et CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#MUSIC{
      position:fixed;
        margin-top: -20%;
        margin-left : 3%;
       }
 
 
      #player {
      margin: 0;
      padding: 1;
           font-family: sans;
           font-size: 12px;
      width: 210px;
         background-color: #48D1CC;
         }
         #playlist {
      border: solid 5px #48D1CC;
      font-family: "Biko";
      font-size: 13px;
           background-color: #777;
      list-style: none;
      margin: 0px;
      padding: 0px;
      width: 200px;
         }
         #playlist li:nth-child(even) {
           background-color: #48D1CC;
         }
         #playlist li:nth-child(odd) {
           background-color: #F0FFFF;
         }
         #playlist li a,
         #playlist li a:visited,
         #playlist li a:hover {
           color: black;
      padding-left: 2px;
      padding-right: 2px;
      text-decoration: none;
         }

[JefReb]

Il faudrait un peu plus de code pour madame Irma la voyante..
Avec un margin-top de -20% comment savoir comment cela se situe par rapport à la page.
un petit aperçu exploitable aurait été bien. Comme un petit codepen.
il manque aussi un </div> dans le code donné.

[NoSmoking]

Bonjour,
sans aller plus loin

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><a href="musiques/Django_Reinhardt_La_Mer.ogg" onclick="loadSong()">Django Reinhardt - La mer</a></li>

aucun passage de paramètre à la fonction sur le onclick, alors que la fonction en demande

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

function loadSong(link,playerId)

[Invité]

Bonjour,

"lorsqu'on clique sur une icône" veut dire "action côté client".
C'est le rôle de JavaScript.

Je déplace la discussion dans le bon forum

[EDIT] @NoSmoking
En fait, il faut même supprimer les onclick="......", car le lancement est géré dans le code JavaScript dans preparePlayer() (avec récupération du href, id du player...).

Sinon, je viens de tester : http://codepen.io/jreaux62/pen/KaONpw
Ca fonctionne plutôt bien !

[felindratetedetigre]

Merci ! c'est déjà ça de corrigé

[Invité]

J'ai mis à jour : http://codepen.io/jreaux62/pen/KaONpw

• player masqué au départ
• affichage sur clic dans la playlist
• masquage sur clic "Pause"