jueves, 17 de mayo de 2012

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){...}
    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


Fuentes





Felinfo: Java, Linux, Virtualización. Open Source.  ©Template Blogger Green by Dicas Blogger .

TOPO