En HTML5, la balise <audio> permet de lire un seul fichier son (mp3, ogg etc.).

Le code permettant de lire un fichier son prend cette forme :

1
2
3
4
<audio controls="controls">
   <source src="titre.mp3" type="audio/mp3" />
   Votre navigateur ne supporte pas la balise HTML5 audio.
</audio> 

Pour utiliser ce même lecteur avec plusieurs fichiers sons différents, il faut « bidouiller » un peu :

1. Modifier le fichier header de votre site en ajoutant juste avant </head> 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<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[i].onclick=function(e) { return loadSong(this, e); };
   	}
   }
</script>

2. Code à ajouter dans votre article 

1
2
3
4
5
6
7
8
9
<div>
   <audio tabindex="0" id="player" controls="controls">
</audio>
   <ul id="playlist">
	<li><a href="fichier1.mp3" onclick="loadSong()">fichier2</a></li>
	<li><a href="fichier2.mp3" onclick="loadSong()">fichier2</a></li>
	<li><a href="fichier2.mp3" onclick="loadSong()">fichier2</a></li>
   </ul>
</div

3. Renseigner le fichier theme.css de votre thème 

 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
#player {
  margin: 0;
  padding: 0;
  font-family: sans;
  font-size: 12px;
  width: 210px;
} 
#playlist {
  border: solid 5px #555;
  font-family: sans;
  font-size: 12px;
  background-color: #777;
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 210px;
}	 
  #playlist li:nth-child(even) {
  background-color: #888;
}
 #playlist li:nth-child(odd) {
  background-color: #777;
}       
 #playlist li a,
 #playlist li a:visited,
 #playlist li a:hover {
  color: white;
  padding-left: 2px;
  padding-right: 2px;
  text-decoration: none;
}

Vous devez obtenir un lecteur de ce type.

Un clic sur le titre démarre le « player »
À vous de modifier le CSS pour obtenir le look souhaité.

Une bonne occasion de ré-écouter Led Zeppelin