X
    Categories: HTML5JAVASCRIPT

Audio en HTML5 soportado en todos los navegadores

Uno de las tantas novedades del html5 es audio y video que facilitan mucho al desarrollado sin estar usando flash para reproducir audio, Ahora solo usamos

<audio width="300" height="32" src="musica.mp3"></audio>

y con eso ya tenemos audio pero resulta que todos los navegadores no lo soportan audio (Si ese que te imaginas IE!!!! en sus versiones 6 , 7 y 8 ) para mas detalle puedes revisar en esta tabla entonces tenemos un polyfills audio.js ya con esto estamos listos para armar el script.
en el header del html colocar

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://kolber.github.com/audiojs/audiojs/audio.min.js"></script>
<script type="text/javascript">
/*con esta linea hacemos que funcione el polyfills*/ var STATUS_REEL=false; audiojs.events.ready(function(){ var as = audiojs.createAll(); });
// ]]></script>

<audio id=»audio» width=»300″ height=»32″ src=»motor.mp3″> </audio>

ya con eso debe funcionar en todos los navegadores pero si queremos ser mas PRO usando el audio entonces vamos a detectar si el navegador soporta audio para poder usar el  nativo y diran por que nativo?
este polyfills lo que hace es reproducir en todos los navegadores el audio por un swf que viene en sus archivos entonces no estamos usando propiamente el audio de html5
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
 
/*si audio es soportado*/
if (Modernizr.audio)
{
/*agregamos los formatos los cuales sirven para distintos navegadores*/
$("#audio_audio").append('<source src="audio/motor.ogg" type="audio/ogg" /><source src="audio/motor.mp3" type="audio/mpeg" /><source src="audio/motor.wav" type="audio/wav" />');
}})
// ]]></script>

Esta tabla les ayudara a comprender que formato es soportado en los distintos navegadores y en esta web puedes convertir en linea su archivo de audio en los distintos formatos

Browser MP3 Wav Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES
Luis Rodriguez: Hola, Soy Luis Rodriguez, radico en Lima – Perú, formado en una carrera informática, desempeñando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi interés en la Analítica Web me ayudó mucho entender el funcionamiento interno de las herramientas de analítica, con las que vengo trabajo activamente desde 2017. Linkedin