La balise
peut lire des fichiers audio dans les navigateurs HTML5.
Un panneau de contrôle est fourni par défaut, mais parfois nous n'avons besoin que de jouer des sons, et c'est à nous de définir son état d'affichage.
Ici on peut utiliser JS pour contrôler, le code est le suivant :
var audio ; window.onload = function(){ initAudio(); } var initAudio = function(){ //audio = document. createElement("audio") //audio.src='Ne jamais dire au revoir.ogg' audio = document.getElementById('audio'); > function getCurrentTime(id){ alert(parseInt(audio.currentTime) ': seconds'); } function playOrPaused(id,obj){ if(audio.paused) { audio.play(); obj.innerHTML='pause'; return; } audio.pause(); obj.innerHTML='play'; } function hideOrShowControls(id,obj){ if(audio.controls){ audio.removeAttribute('controls'); obj.innerHTML = 'Afficher le contrôle box' return ; } audio.controls = 'controls'; obj.innerHTML = 'Masquer la boîte de contrôle' return; > function vol(id ,type, obj){ if(type == 'up'){ var volume = audio.volume 0.1; if(volume >=1 ){ volume = 1 ; } audio.volume = volume; }else if(type == 'down'){ var volume = audio.volume - 0.1; if(volume < =0 ){ volume = 0 ; } audio.volume = volume; } document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume); } fonction mute(id,obj){ if(audio.muted){ audio.muted = false; obj.innerHTML = 'Activer la sourdine'; } else{ audio. muted = true; obj.innerHTML = 'Désactiver le mode muet'; } } //Conserver un point décimal function returnFloat1( valeur) { valeur = Math.round(parseFloat(value) * 10) / 10; if (value.toString().indexOf(".") < 0){ valeur = valeur .toString() ".0" ; } valeur de retour ; }
La méthode d'appel est la suivante :