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 |