Un simple bouton play et pause (html5 audio)

Bonjour,

J'aimerais connaître la marche à suivre en utilisant le lecteur audio html5 pour n'avoir uniquement les boutons : play & pause de visible.

Avec l'état actuel des éléments média HTML, on ne peut pas choisir quel type de contrôles afficher. L'attribut "controls" affiche (par sa présence) ou masque (par son absence) l'ensemble des boutons.
Pour obtenir une interface personnalisée, il faut créer 2 images play/pause et leur lier au clic une balise <audio> "masquée" (attention toutefois à l'accessibilité et à la navigation au clavier).

Exemple (à adapter/améliorer)

<audio src="lorie.mp3" style="display:none" id="player">
<a href="#" title="Lancer la lecture"><img src="play.png" alt="Lecture" id="btnplay"></a>
<a href="#" title="Mettre en pause"><img src="pause.png" alt="Pause" id="btnpause"></a>
<script>
document.getElementById('btnplay').onclick = function() {
  document.getElementById('player').play();
  return false;
}
document.getElementById('btnpause').onclick = function() {
  document.getElementById('player').pause();
  return false;
}
</script>

Ok, merci dew ! Je vais testé çà !

Cependant, j'ai trouvé une petite solution de magouilleur avec le " dewplayer ".
J'ai caché avec un overflow et un width la partie de droite pour ne garder uniquement l'icône " play & pause ". Pas très fière mais le rendu me va !