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





16 Comentarios:

Diseñador dijo...

Es justo la información que andaba buscando, gracias por el aporte. Un saludo.

Felipe dijo...

Gracias a tí por comentar.

Un saludo.

Anónimo dijo...

Muchas gracias por el aporte me fue de gran utilidad!!!

Felipe dijo...

Me alegro que te haya servido.

Saludos.

Angel Diaz dijo...

Excelente amigo, muchas gracias.

Felipe Martínez D. dijo...

Hola Angel.

Gracias a tí por comentar.

Saludos.

leonel islas gonzález dijo...

muchas gracias

Felipe Martínez D. dijo...

Gracias Leonel por comentar.

Willian Chaupi Alvarez dijo...

Buen Aporte... Saludos

Felipe Martínez D. dijo...

Gracias a tí por comentar. Saludos.

servicios inmobiliarios informaticos dijo...

pregunta como le hago para que empieze a reproducirse automaticamente sin darle play

Felipe Martínez D. dijo...

Hola.

Prueba con este código:

< audio controls autoplay>
< source src="samplemusic.mp3" type="audio/mp3" />
< /audio>


Nota: he tenido que modificar el código para que se muestre en los comentarios. Para que te funcione debes de borrar el espacio en blanco que hay después de < .

Saludos.

Santi dijo...

estaba buscando un codigo como este,muy bueno.
si pudieras decir como le puedo poner algo de css al reproductor ya estaria genial un saludo.

Felipe Martínez D. dijo...

Hola Santi.

Puedes aplicarle css a los elementos reproductor como se le aplicaría a cualquier otro elemento web de una página. Inténtalo y si tienes alguna duda, dímelo.

Saludos.

Santi dijo...

hola felipe el problema que tengo ahora es el siguiente:
tengo varios reproductores de audio,se esta esta reproducciendo una musica pero doy a otro reproductor de audio y no se para el primera,y se escuchan a la vez,como hago para que cuando de a play a una se pare la reproduccion de la otra.un saludo

Felipe Martínez D. dijo...


Hola Santi.

Si tienes varios reproductores en la misma página, deberás asignarle un id distinto a los elementos de los distintos reproductores. Ejemplo:


< p>
< button id="play1">PLAY< /button>
< button id="pause1">PAUSE< /button>
< /p>
< audio id="audio1" controls="controls">

< p>
< button id="play2">PLAY< /button>
< button id="pause2">PAUSE< /button>
< /p>
< audio id="audio2" controls="controls">

< p>
< button id="play3">PLAY< /button>
< button id="pause3">PAUSE< /button>
< /p>
< audio id="audio3" controls="controls">


En la parte de < script> tendrás que hacer lo mismo. De esa forma los distintos reproductores podrán funcionar independientemente. Si tienes alguna duda, dímelo.

Saludos.

Publicar un comentario

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

TOPO