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





17 Comentarios:

Diseñador dijo...

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

Felipe Martínez D. dijo...

Gracias a tí por comentar.

Un saludo.

Anónimo dijo...

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

Felipe Martínez D. dijo...

Me alegro que te haya servido.

Saludos.

mrangel17 dijo...

Excelente amigo, muchas gracias.

Felipe Martínez D. dijo...

Hola Angel.

Gracias a tí por comentar.

Saludos.

Unknown dijo...

muchas gracias

Felipe Martínez D. dijo...

Gracias Leonel por comentar.

Unknown dijo...

Buen Aporte... 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.

Unknown dijo...

Pregunta como haga para añadirle un playlis y en que parte del codigo

Felipe Martínez D. dijo...

Hola Walter.

He encontrado un ejemplo de como hacer un reproductor web con playlist, pero no usa solo html5 como en mi ejemplo, sino que añade también Javascript: https://codepen.io/markhillard/pen/Hjcwu

Espero que te sirva.

Publicar un comentario

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

TOPO