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 :
<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>
<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
<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
#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