Audio en HTML5 soportado en todos los navegadores

PIN
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

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
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Hi, I'm 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

http://luisrodriguez.pe

Leave Your Comments