Reproducir un archivo MP3 mediante HTML5
El ejemplo que vamos a tratar es la reproducción de un archivo MP3 mediante etiquetas HTML5. Con ello comprobaremos la potencia y la simplicidad de HTML5. Sí quiero dejar bien claro que los navegadores aún no soportan todos los tags o etiquetas HTML5 y el tag audio que utilizaremos, es un ejemplo de ello. Por ejemplo, está soportado por Chrome 18 e Internet Explorer 9, pero no por Firefox 12. En la página http://html5test.com/ podemos comprobar qué etiquetas están soportadas por el navegador que estamos utilizando. Dicho esto, pasemos a ver la parte práctica.
El código simplificado
Sólo con este código podemos mostrar en el navegador los controles necesarios para reproducir, pausar, ajustar el volumen y avanzar o retroceder la reproducción hasta un punto deseado.
<code><pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reproductor MP3</title>
</head>
<body>
<audio id="audio" controls="controls">
<source src="samplemusic.mp3" type="audio/mp3" />
</audio>
</body>
</html>
</code></pre>
El código ampliado
Aquí podemos ver cómo añadir unos botones "play" y "pause" que controlarán la reproducción. Para ello haremos uso de un script Javascript y de las funciones play() y pause() del tag audio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reproductor MP3</title>
</head>
<body>
<p>
<button id="play">PLAY</button>
<button id="pause">PAUSE</button>
</p>
<audio id="audio" controls="controls">
<source src="samplemusic.mp3" type="audio/mp3" />
</audio>
<script>
var myAudio = document.getElementById("audio");
var btnPlay = document.getElementById("play");
var btnPause = document.getElementById("pause");
btnPlay.addEventListener("click", function(){myAudio.play();}, false);
btnPause.addEventListener("click", function(){myAudio.pause();}, false);
</script>
</body>
</html>
Las funciones del tag audio
A continuación se muestran algunas funciones el tag audio que son muy utilizadas:
play() — reproduce el audio
pause() — pausa el audio
canPlayType() — Indica si el navegador puede reproducir audio. Ejemplo:
if (myAudio.canPlayType){...}
if (myAudio.canPlayType){...}
buffered() — Atributo que especifica el principio y el fin
del buffer. Ejemplo: video.buffered.end(video.buffered.length-1);
Para más información, puedes consultar el siguiente enlace:
http://www.w3schools.com/html5/html5_ref_av_dom.asp
http://www.w3schools.com/html5/html5_ref_av_dom.asp
Fuentes
Tweet
