¿Estás cansado del típico reproductor de audio en tu sitio web? ¡Tenemos la solución para ti! El sonido HTML5 es la última tendencia en la reproducción de audio en línea. Con él, puedes ofrecer a tus usuarios una experiencia de audio más interactiva y personalizada. En este artículo de TIEngranaje, te contamos todo lo que necesitas saber sobre el sonido HTML5 y cómo puedes implementarlo en tu sitio web. ¡No te lo pierdas!
HTML5 introduce soporte de medios integrado a través de <audio> elemento, que le ofrece la posibilidad de incrustar fácil y rápidamente sus medios de audio en documentos HTML.
La principal ventaja de la <audio> elemento es que proporciona soporte para reproducir medios de audio sin que requieren complementos externos.
Hasta ahora, no ha habido un estándar para reproducir archivos de audio en páginas web. Lo que suele encontrar en los sitios web es que los archivos de audio se reproducen a través de complementos externos, como flash u otros componentes de audio de terceros. HTML5 define esto nuevo elemento que ahora proporciona una forma estándar de incrustar audio en un documento web.
Internet Explorer 9, Firefox, Opera, Chrome y Safari apoyo el <audio> elemento. Sin embargo, Internet Explorer 8 y versiones anteriores no son compatibles con <audio> elemento y requeriría un mecanismo de respaldo para reproducir audio en una página web.
Soporte de formato de audio y navegador
| Navegador | MP3 | onda | Ogg |
|---|---|---|---|
| Apple Safari 5+ | Sí | Sí | No |
| Firefox 4+ | No | Sí | Sí |
| Google Chrome 6+ | Sí | Sí | Sí |
| Explorador de Internet 9+ | Sí | No | No |
| Ópera 10.6+ | No | Sí | Sí |
Ejemplo
El <audio> El elemento contiene elementos secundarios para que se puedan configurar los archivos de origen y las opciones de respaldo. Se pueden especificar múltiples archivos fuente usando el <source> elemento con el fin de proporcionar el audio codificado en diferentes formatos para diferentes navegadores. El controls El atributo agrega controles de audio, como jugar, pausay volumen.
<audio controls>
<source src="https://www.itgeared.com/html5-audio-element-tutorial/audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
Audio playback is not supported by your browser.
</audio>Métodos, propiedades y eventos del DOM
HTML5 tiene métodos DOM, propiedades y eventos para el <audio> elemento. Estos métodos, propiedades y eventos le permiten manipular <audio> elemento usando JavaScript. Puede usar métodos para reproducir, pausar y cargar los videos. También hay eventos DOM que pueden notificarle cuando el audio comienza a reproducirse, se detiene o finaliza, por ejemplo.
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<br/><br/>
<audio id="audio1" >
<source src="https://www.itgeared.com/html5-audio-element-tutorial/audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
Audio playback is not supported by your browser.
</audio>
</div>
<script>
var myAudio=document.getElementById("audio1");
function playPause() {
if (myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
</script>
</body>
</html>