Javascript

HTML5

HTML5 - Lecteur audio

La balise audio permet déjà tous les contrôles, on peut s’en contenter ou passer à la vitesse supersonique (!) avec la librairie clé en main SoundManager2! Mais il y a aussi le Javascript car la balise audio est un élément à part entière du « document object model (DOM) » tout à fait manipulable à l’aides des événements!

Audio « Jupiter electromagnetic sounds » Par voyager, nasa :
État : Vide - Vide - true -

<p>Audio Bruit de fond campagnard : <b><span id="oAudioEtat">Vide</span></b></p>
<input class="bouton" type="button" value="Jouer" id="oJouer" />
<input class="bouton" type="button" value="Pause" id="oPause" />
<input class="bouton" type="button" value="Arrêter" id="oArret" />

<script>
document.getElementById("oJouer").addEventListener("click",function() {audio.play()});
document.getElementById("oPause").addEventListener("click",function() {audio.pause()});
document.getElementById("oArret").addEventListener("click",function() {audio.pause();audio.currentTime = 0.0});

var audio = new Audio();
audio.src = "http://trucsweb.com/documents/audio/mp3/2246.mp3";
audio.volume=0.1;
audio.load();
audio.play();

</script>

Valeur de l’attribut « readystate » de l’élément audio : audio.readyState

0

HAVE_NOTHING - aucune information, ou aucun élément audio n’est disponible

1

HAVE_METADATA - les métadonnées audio sont disponible

2

HAVE_CURRENT_DATA - les données de la position de la tête de lecture est disponible. Mais pas suffisamment pour passer au prochain segment (frame/millisecond)

3

HAVE_FUTURE_DATA - les données de la position de la tête de lecture et au moins le prochain segment est disponible

4

HAVE_ENOUGH_DATA - les données sont suffisante pour partir la lecture.

Détection des formats compatibles

<script>
var oAudio = twFormatAudio();
if(!oAudio) {
  document.write("Aucun support audio");
} else {
  document.write("Votre navigateur supporte le(s) format(S) :");
  var aFormats = ["ogg", "mp3", "wav", "m4a"];
  for(var i = 0; i < aFormats.length; i++) {
    document.write("<span class=\"tag\" title=\"" + oAudio[aFormats[i]] + "\">" + aFormats[i] + "</span>");
  }
}

function twFormatAudio() {
  var oElement = document.createElement("audio"), bool = false;
  try {
    if ( bool = !!oElement.canPlayType ) {
      bool = new Boolean(bool);
      bool.ogg = oElement.canPlayType("audio/ogg; codecs=\"vorbis\"").replace(/^no$/,"");
      bool.mp3 = oElement.canPlayType("audio/mpeg;").replace(/^no$/,"");
      bool.wav = oElement.canPlayType("audio/wav; codecs=\"1\"").replace(/^no$/,"");
      bool.m4a = (oElement.canPlayType("audio/x-m4a;") || oElement.canPlayType("audio/aac;")).replace(/^no$/,"");
    }
  } catch(e) {
    // Erreur
  }
  return bool;
}
</script>

Librairies (API)

• SoundJS
• audioJS
• jPlayer
• audio.js
• SoundManager2
• LeanBack Player - HTML5 audio/video media player

Références

• HTML Audio/Video DOM Reference