Desde el lanzamiento de HTML5, los audios se pueden agregar a las páginas web usando la etiqueta «audio». Anteriormente, los audios solo se podían reproducir en páginas web mediante complementos web como Flash. La etiqueta de «audio» es un elemento en línea que se utiliza para incrustar archivos de sonido en una página web. Es una etiqueta útil si desea agregar audio como canciones, entrevistas, etc. en su página web.
Sintaxis:
<audio> <source src="sample.mp3" type="audio/mpeg"> </audio>
Atributos: los diversos atributos que se pueden usar con la etiqueta «audio» se enumeran a continuación:
- Controles : Designa qué controles mostrar con el reproductor de audio.
- Reproducción automática : Designa que el archivo de audio se reproducirá inmediatamente después de cargar los controles.
- Bucle : Designa que el archivo de audio debe repetirse continuamente.
- src : Designa la URL del archivo de audio.
- muted : Designa que el archivo de audio debe silenciarse.
Formatos compatibles: HTML5 admite tres formatos mp3, ogg, wav. El soporte para cada formato por diferentes navegadores se da a continuación:
| Navegador | MP3 | WAV | OGG |
|---|---|---|---|
| Google Chrome | Sí | Sí | Sí |
| explorador de Internet | Sí | No | No |
| Firefox | Sí | Sí | Sí |
| Ópera | Sí | Sí | Sí |
| Safari | Sí | Sí | No |
Los siguientes ejemplos explican la etiqueta de audio:
Ejemplo 1 (Agregar audio a la página web): el atributo de controles se usa para agregar controles de audio como reproducción, pausa y volumen. El elemento «fuente» se utiliza para especificar los archivos de audio que puede utilizar el navegador. El navegador utiliza el primer formato reconocido.
HTML
<!DOCTYPE html> <html> <body> <p>Audio Sample</p> <!-- audio tag starts here --> <audio controls> <source src="test.mp3" type="audio/mp3"> <source src="test.ogg" type="audio/ogg"> </audio> <!-- audio tag ends here --> </body> </html>
Producción :
Ejemplo 2 (reproducción automática de audio en una página web): el atributo de reproducción automática se utiliza para iniciar automáticamente la reproducción del archivo de audio cada vez que se carga la URL de la página web.
HTML
<!DOCTYPE html> <html> <body> <p>Audio Sample</p> <!-- audio tag starts here --> <audio controls autoplay> <source src="test.mp3" type="audio/mp3"> <source src="test.ogg" type="audio/ogg"> </audio> <!-- audio tag ends here --> </body> </html>
Producción :
Ejemplo 3 (Agregar un archivo de audio silenciado en una página web): el atributo silenciado especifica que el audio debe silenciarse en la página web.
HTML
<!DOCTYPE html> <html> <body> <p>Audio Sample</p> <!-- audio tag starts here --> <audio controls muted> <source src="test.mp3" type="audio/mp3"> <source src="test.ogg" type="audio/ogg"> </audio> <!-- audio tag ends here --> </body> </html>
Producción :
Ejemplo 4 (Agregar audio usando el elemento fuente): El elemento fuente se puede usar para agregar archivos de audio a una página web. El atributo src se usa para especificar la fuente del archivo especificado.
HTML
<!DOCTYPE html> <html> <body> <p>Audio Sample</p> <!-- audio tag starts here --> <audio controls autoplay> <source src="test.mp3" type="audio/mp3"> </audio> <!-- audio tag ends here --> </body> </html>
Producción :
Ejemplo 5 (Agregar audio con múltiples fuentes): se especifican múltiples fuentes de audio de modo que si el navegador no puede reproducir la primera fuente, saltará automáticamente a la segunda fuente e intentará reproducirla.
HTML
<!DOCTYPE html> <html> <body> <p>Audio Sample</p> <!-- audio tag starts here --> <audio controls autoplay> <source src="test.mp3" type="audio/mp3"> <source src="test.ogg" type="audio/ogg"> <source src="test.opus" type="audio/ogg"> </audio> <!-- audio tag ends here --> </body> </html>
Producción :
Ejemplo 6 (Agregar audio usando la etiqueta «Incrustar»): agregar audios a una página web usando la etiqueta «incrustar» es una técnica antigua. Este método funciona, pero es comparativamente menos eficiente que los otros métodos. El usuario debe tener un complemento como MIDI o QuickTime porque la etiqueta incrustada requiere un complemento para su compatibilidad.
HTML
<!DOCTYPE html> <html> <body> <p>Audio Sample</p> <!-- embed code starts here --> <embed src="test.mp3" width="200" height="50" autoplay="true" loop="true"> <!-- embed code ends here --> </body> </html>
Producción:
Navegadores compatibles:
- Google Chrome 3.0 y superior
- Borde 12.0 y superior
- Internet Explorer 9.0 y superior
- Firefox 3.5 y superior
- Ópera 10.5 y superior
- Safari 3.1 y superior
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA