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.
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
Es justo la información que andaba buscando, gracias por el aporte. Un saludo.
Gracias a tí por comentar.
Un saludo.
Muchas gracias por el aporte me fue de gran utilidad!!!
Me alegro que te haya servido.
Saludos.
Excelente amigo, muchas gracias.
Hola Angel.
Gracias a tí por comentar.
Saludos.
muchas gracias
Gracias Leonel por comentar.
Buen Aporte... Saludos
pregunta como le hago para que empieze a reproducirse automaticamente sin darle play
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.
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.
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.
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
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.
Pregunta como haga para añadirle un playlis y en que parte del codigo
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