Trucsweb.com

Trucsweb.com

Javascript

HTML5

RDFFav

HTML5 - Lecteur audio

Lecteur audio personnel de type jukebox avec contrôle javascript,mp3, wav, ogg, musiqueHTML5 - Lecteur audio

L’atmosphère jovienne : La Grande tache rouge - Jupiter (Auteur : Voyager 1)

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 -

0
00:00
L’atmosphère jovienne : Animation - Jupiter (Auteur : Voyager 1)
<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)
Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

10/10 sur 1 revues.
       Visites : 6245 - Pages vues : 6539
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@