Una de las principales cosas que llama la atención cuando hablamos de HTML5, son las famosas etiquetas <audio> y <video>. Estas etiquetas tienen su gran fama por que nos permiten consumir multimedia sin necesidad de instalar plugins adicionales al navegador o en nuestra computadora.

Ahora el navegador haría el trabajo solo, no dependería de nadie, por ejemplo, el famoso Flash Player quien dicen muchos que esta temblando de miedo por que probablemente pueda desaparecer o no.

Empecemos con el tutorial, hoy vamos a aprender el Uso básico de la etiquetas Audio en HTML5, es un buen inicio para comprender el funcionamiento y empezar a crear cosas mas avanzadas que después veremos.

Veamos la etiqueta audio

Uso básico de la etiqueta Audio en HTML5

Vista previa del reproductor por defecto de Google Chrome

La etiqueta <audio> es la mas sencilla de las dos, por que solo implica un reproductor de audio. Para implementarla es muy sencillo:

<audio width="300" height="32" src="micancion.mp3" controls="controls" autoplay="autoplay" preload="">

</audio>

Expliquemos los atributos de la etiqueta:

  • SRC: Nos enlaza el archivo de audio que queremos reproducir.
  • CONTROLS: Nos permite implementar los controles del reproductor por defecto del navegador como, botón play-pause, seek y volumen.
  • AUTOPLAY: Nos permite reproducir el archivo de audio desde que se carga la pagina.
  • PRELOAD: Nos carga un poco el archivo de audio antes de iniciar la reproducción en el buffer para que no se trabe por reproducir mas de lo que carga.

Como pueden ver, es demasiado sencillo para empezar a jugar con esta etiqueta. Pero aquí aun no termina todo, como es  algo nuevo de implementar, los navegadores luchan por cual formato de audio debe liderar la web, entonces hay que atender a todos.

Implementación de formatos de audio

Tenemos muchos navegadores con diferente compatibilidad, pero lo que mas nos interesa son los Motores de Renderizado, estos se encargan de renderizar el código de nuestra pagina web e implementar ahora el contenido multimedia.

Veamos cuales motores corresponden a cada navegador:

  • Google Chrome: WebKit
  • Safari: WebKit
  • Mozilla FireFox: Gecko
  • Internet Explorer: Trident
  • Opera: Presto

Estos son los Navegadores mas importantes hasta ahora, y ahora veamos la compatibilidad con los archivos de audio.

Uso básico de la etiqueta Audio en HTML5

Ahora que se tiene conocimiento de que motores o navegadores aceptan un formato, pasamos a hacer compatible AUDIO con todos ellos.

Es algo diferente de implementar ahora, por que hay que decirle los diferentes archivos que existen para que el navegador tome alguno de los que puede reproducir.

<audio controls autoplay preload>
<source src="cancion.ogg" type="audio/ogg" />
<source src="cancion.mp3" type="audio/mpeg" />
<source src="cancion.wav" type="audio/wav" />
Tu navegador no soporta esta caracteristica
</audio>

Es casi lo miso, solo que ahora quitamos el SRC y solo dejamos las demas propiedades pero ahora dentro de las etiquetas de apertura y cierre ponemos una etiqueta SOURCE para decirle que archivo va enlazar y que tipo de audio es.

  • SRC: Nos enlaza el archivo de audio que queremos reproducir.
  • Type: Le decimos que tipo de audio o codec va reproducir

Con esto ya hacemos compatible con todos los motores de renderizado o navegadores (excepto IE8 y anteriores, IE9 si es compatible).

Espero que les agrade y les sirva este tutorial, Gracias por visitarnos.

Luis Antonio Gomez Prieto

Luis Antonio Gomez Prieto

Co-founder and Fullstack developer at @wavecodela

24 comentarios en “Uso básico de la etiqueta Audio en HTML5

    1. ¡Claro que se puede usar un estilo propio!, solo es cuestión de saber usar en Javascript las sintaxis como, Seek, Play, Pausa, Stop y otras mas. Ya sea con Audio o con Video.

  1. pero no mencionaste con que programa podemos convertir el audio a todos esos formatos o si al alguna web como la que usan para convertir las fonts a los formatos de los diferentes navegadores y otra no pusiste cual navegador usa cual formato estaria mucho mejor el tutorial agregandole esos datos fuera de ahi esta muy bien este tutorial y esta web la encontre recientemente buscando info de los inpud de HTML5

  2. Hola Manuel Luna, para convertir Audio a esos formatos, existen muchos programas o aplicaciones, incluso conversores de video que tambien convierten audio y en cuanto a explicar que navegadores usan esos formatos de audio, no es necesario por que lo mas importante en un navegador es su motor de renderizado, el motor es el que decide que formato de audio sera compatible con el navegador.

    Saludos y gracias por comentar, vamos a modificar el post para agregar algunos programas para convertir audio.

  3. hola amigo una duda, coloque audio a una pagina y al momento de abrirla desde un smartphone me reproduce bien, el problema esta cuando se esta reproduciendo un audio y giro el celular (ejemplo: de horizontal a vertical) se reproduce otra vez el audio y se empalman si esto se hace varias veces antes de que termine el audio se empalman los sonidos y no se entiende nada la pregunta es en hacer alguna de estas opciones:

    1- Que codigo agrego para que el audio se reproduzca una sola vez?

    o

    2- Que codigo agrego para que al cerrar la pagina (al momento de que gira hace como un pequeño parpadeo) se dentenga el audio antes de empezar el otro?

    o

    3- Bloquear por medio del codigo html5 que no gire la pagina aun que el celular sea girado?

    o alguna otra opcion que se te ocurra para solucionar este problema, gracias de antemano y saludos

  4. Hola,

    Lo he estado probando y me funciona correctamente en Chrome pero no en IE9, me sale el reproductor como en negro y una "x" ¿que puede ser?

    Gracias

    1. Hola, disculpa nuestra demora en responder, dejamos el trabajo por fechas celebres pero aquí estamos de vuelta.

      Revisa la compatibilidad del formato de video y el codec con IE9, puede ser que no sea compatible y tengas que usar otro, un ejemplo es MP4, este si es compatible.

  5. Hola, estoy planenado crear una radio online, que me gustaría que tendría un reproductor autoplay con bastantes canciones y sobretodo, quería saber, si se puede escoger un modod de reproducción aleatorio, es decir, que me reproduzca las canciones aleatoriamente y que no siempre repita el mismo orden de reproducción , muchas gracias, un saludo

  6. Hola amigos necesito ayuda por favor de alguien que comprenda esto:
    En mi web tengo un reproductor de música con la etiqueta audio de html5 la cual controlo con javascript, lo que en javascript controlo es que al terminar de cargase la pagina con onload llama a una función que comprueba con true y false si el navegador admite esta funcionalidad, vale, después de eso aparece el reproductor. Este reproductor tiene que reproducirse automáticamente al cargar la pagina, esto lo hace perfecto en todos los navegador…menos en crome para móvil y tablet. El navegador que viene por defecto en los móviles android si lo reproduce en algunas versiones. He hecho miles de pruebas e intentar que se reproduzca en estos, pero sin lógralo todavía, no sé que puede estar pasando, no lo comprendo. Incluso le he puesto en la propia etiqueta audio autoplay y nada en tabley y móvil sigue igual. Aquí os pongo el código para que comprendáis mejor lo que quiero decirlos:
    Código html
    <div id="musicafondohtml5">
    <audio id="audiohtml5">
    <source src="musica-fondo.ogg" type="audio/ogg">
    <source src="musica-fondo.mp3" type="audio/mp3">
    </audio><div id="play" onclick="reproductor(&apos;play&apos;)">Play</div>
    <div id="stop" onclick="reproductor(&apos;stop&apos;)">Stop</div>
    </div>
    Código javascript
    // JavaScript Document
    function soporteaudio() {//comprueba compatibilidad elemento audiohtml5 en navegadores
    return !!document.createElement(&apos;audio&apos;).canPlayType;
    }
    function soporteaudio2 () {
    /*aqui en if se llama a la funcion soporteaudio() y se comprueba que retorno con (return) la funcion soporteaudio(). Devuelve true o false*/
    if (soporteaudio()) {//se vera etiqueta audio html5 fusica fondo
    document.getElementById(&apos;musicafondohtml5&apos;).style.display = "block";
    document.getElementById(&apos;audiohtml5&apos;).play();
    }
    else {//se vera musica fondo flash
    document.getElementById(&apos;musicaflash&apos;).style.display = "block";

    }
    }
    //principio llamadas botones reproductor html5
    function reproductor(boton) {
    if (boton == &apos;play&apos;) {
    document.getElementById(&apos;audiohtml5&apos;).play();

    }
    else {
    if (boton == &apos;stop&apos;)
    document.getElementById(&apos;audiohtml5&apos;).pause();
    }
    }
    //final llamadas botones reproductor html5

    1. Primero que nada, usa JQuery y veras la gran diferencia, este framework tiene la función $(document)ready(); que ejecuta todo lo que tenga dentro cuando el documento esta cargado. Con el atributo autoplay debería ser suficiente para que se autoreprodusca, no necesitas nada más.

  7. no he probado nunca esta libreria, pero tendre que echarle un vistazo…de todas formas sabrias porque esta pasando esto? el codigo es perfectamente correcto.podria ser que algunos navegadores y para algunos dispositivos bloqueen la opcion autoplay? o que estos navegadores de para moviles o tablet no comprendan bien html5, no se….

  8. ¿Para el navegador Mozilla que tipo de formato tengo que meter?, no me funciona con wav aunque me aparece el reproductor, pero realmente no busco hacer eso… lo que quiero hacer es que suene un sonido de fondo sin reproductor ni nada al entrar a mi web… ¿como se hace eso?.

    Un saludo,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar