Desde hace tiempo que venimos apostando por el audio HTML5 en el departamento en el que colaboro y hoy, al terminar de montar una tarjeta navideña en un sitio web, pensé que sería buena idea que el audio estuviera con la etiqueta <audio> de HTML5. Hasta hacer sonar el audio no hubo problemas. Consistió subir al servidor los archivos MP3 y OGG, necesarios para que el audio se ejecute en todos los navegadores y dispositivos actuales y colocar el código correspondiente:

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

Hasta ahí bien porque el audio se reproduce correctamente. El problema surgió cuando necesitamos que el audio se ejecutara en ciertas situaciones y en otras no. Ahí fue cuando apareció en escena jQuery. Buscando en internet encontré que jQuery tiene unas funciones que permiten controlar el audio HTML5 que yo desconocía. Son las funciones:

$(«#audio»)[0].pause(); $(«#audio»)[0].play();

De esta manera con agregarle al código un identificador (id=»audio») ya pude controlar las ejecuciones del audio. Un ejemplo:

<script>
	$(document).ready(function(){
		$("#audio")[0].play();
	})
</script> 
<audio id="audio">
   <source src="audio.ogg" type="audio/ogg" />
   <source src="audio.mp3" type="audio/mp3" />
</audio>

¡Listo! ¡Espero que te sirva para algún proyecto!

Referencias:
http://www.w3schools.com/html5/tag_audio.asp
http://www.premiumbeat.com/tech-blog/how-to-make-an-html5-music-player-using-the-audio-tag/

Acerca

Pin It on Pinterest