No es habitual el uso de audio en la web fuera de páginas especializadas para tal fin. Pero a veces surge la necesidad de reproducir ciertos archivos de audio o tener un pequeño reproductor en tu web.
Desde hace muchos años, se viene usando flash para solucionar esto, pero desde la salida del Html5, las posibilidades han aumentado. Ahora es muy sencillo, con un par de etiquetas puedes tener un reproductor enteramente funcional en tu web:
<audio controls>
<source src="/media/audio.ogg" type="audio/ogg" />
<source src="/media/audio.mp3" type="audio/mpeg" />
</audio>
Compatibilidad de navegadores
Como veis he puesto dos tipos diferentes de archivo. Éste es el problema de las novedades de Html5, los navegadores todavía no lo interpretan de igual manera. Para algunas de las nuevas funciones de Html5 no existe una compatibilidad para todos los navegadores. Este problema podemos solventarlo guiándonos por esta tabla:
| Browser |
MP3 |
Ogg |
Wav |
| Internet Explorer 9+ |
YES |
NO |
NO |
| Chrome 6+ |
YES |
YES |
YES |
| Firefox 3.6+ |
NO |
YES |
YES |
| Safari 5+ |
YES |
NO |
YES |
| Opera 10+ |
NO |
YES |
YES |
Según vemos, usando los formato ogg y mp3, cubrimos toda la gama de los navegadores principales, por lo que podemos estar bastante seguros de su uso. Aún así, si queremos estar seguros al 100%, podemos añadir una nueva fuente, usando el viejo flash:
<object type="application/x-shockwave-flash" data="reproductor.swf?soundFile=audio.mp3">
<param name="movie" value="reproductor.swf?soundFile=audio.mp3" />
</object>
Opciones para el reproductor con Html5
- Autoplay (true|false) => Si queremos que el audio empiece a reproducirse al cargar la página. Esto lo evitaría, porque personalmente, no hay nada más molesto que empezar a oír un audio de una web sin saber exactamente que es.
- Preload (none | metadata | auto) => Para que vaya cargando automáticamente al iniciar la página.
- Loop (true | false) => Se repite continuamente
- Controls (true | false) => Aparece un cuadro de controles para gestionar el audio con las típicas funcionalidades: play, stop, pause, etc.. Cada navegador tendrá su propio formato.
API javascript
Puedes personalizarlo aún más usando javascript y la potencia de la api que ofrece, un par de ejemplos sencillos:
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>