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.php de votre site en ajountant 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