En HTML5 existe una nueva etiqueta o especificación que nos permite introducir archivos de audio en nuestra página web, dicha etiqueta es <audio>, para poder incrustar una archivo de audio y que la ejecute nativamente nuestro navegador debemos ponerlo de la forma siguiente.

<audio src="archvio_de_audio.mp3">
    <p>Tu navegador no soporta este archivo de audio</p>
</audio>

Se le pueden añadir distintos atributos como controls (para que muestre los controles, play, pause, etc… ) autoplay (para que comience automáticamente)  y loop (para que cuando termine vuelva a empezar.

Si bien es sabido que no todos los navegadores soportan todos los formatos de audio, podemos modificar la etiqueta de audio para insertar varias versiones del archivo en diferentes formatos, quedando de la siguiente forma:

<audio>
    <source src="archivo.mp3" type="audio/mpeg"/>
    <source src="archvio.ogg" type="audio/ogg"/>
</audio>

 

Insertando el audio en mp3 y ogg se podría reproducir el archivo en todos los navegadores modernos, si bien tendríamos un problema en los navegadores mas antiguos que no reconocen las etiquetas HTML5, aunque hagamos lo que poníamos en la entrada anterior, HTML5 compatible en todos los navegadores, puede que haya navegadores que sigan sin reproducirnos nuestro archivo de audio, para evitar este problema podemos usar el archivo audio.js, dicho programa nos permite utilizar la etiqueta <audio> para insertar un archivo de audio en nuestro navegador, aunque este no la soporte, apareciendo de la forma siguiente, que podremos personalizar.

 

Una vez descargado el archivo a nuestro sitio aparecerá un ejemplo y una carpeta audiojs que es donde se encuentran los archivos que necesitaremos para hacerlo funcionar, los archivos son audio.min.js, audiojs.swf y player-graphics.gif.

Para que funcione en nuestra web el archivo de audio tenemos que incluir el archivo audio.js con la siguiente orden, preferiblemente antes del </HEAD> de nuestra página:

<script src="/audiojs/audio.min.js"></script>

A continuación debemos inicializar audio.js insertando el siguiente código:

<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>

y por último ya podemos poner nuestro audio con la etiqueta <audio> donde sea necesario.

<audio src="archvio_de_audio.mp3">
    <p>Tu navegador no soporta este archivo de audio</p>
</audio>

Pin It on Pinterest