El atributo de controles HTML <audio> se usa para especificar el control para reproducir audio, lo que significa que permite incrustar un reproductor de música HTML5 con controles de audio directamente en la página web.
El HTML5 actual más utilizado es ogg, mp3 y wav como formatos de audio en la etiqueta de audio porque la compatibilidad del navegador con ellos difiere, por ejemplo, Firefox no es compatible con MP3 sin usar un complemento.
Sintaxis:
<audio controls> <source> </audio>
Desde arriba, el atributo de controles de sintaxis agrega controles de audio, como reproducción, pausa y volumen, y el elemento <fuente> le permite especificar archivos de audio alternativos.
La etiqueta de audio admite principalmente 5 atributos como se indica a continuación:
- reproducción automática: hace que el audio comience a reproducirse automáticamente, sin esperar a que termine de descargarse todo el archivo de audio.
- loop: A través de loop puedes reproducir el audio una y otra vez.
- silenciado: hace que el reproductor esté silenciado de forma predeterminada.
- precarga: Esto se puede establecer en el siguiente valor.
- auto : Esto implica si el archivo debe cargarse tan pronto como se cargue la página.
- metadatos: Esto implica si solo se deben cargar los metadatos, el título de la pista, etc.
- ninguno: Esto implica que el navegador no debe cargar el archivo cuando se carga la página.
-
src: Esto define la url de la música que debe reproducir la etiqueta de audio.
Ejemplo 1: uso del atributo src en el código siguiente.
HTML
<!DOCTYPE html> <html> <body style="text-align: center"> <h1 style="color: green"> GeeksforGeeks </h1> <h2 style="font-family: Impact"> HTML Audio controls Attribute </h2> <br> <audio id="Test_Audio" controls> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.ogg" type="audio/ogg"> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.mp3" type="audio/mpeg"> </audio> </body> </html>
Producción:
Ejemplo 2: uso del atributo de reproducción automática para reproducir audio automáticamente .
HTML
<!DOCTYPE html> <html> <body style="text-align: center"> <h1 style="color: green"> GeeksforGeeks </h1> <h2 style="font-family: Impact"> HTML Audio controls Attribute </h2> <br> <audio id="Test_Audio" controls autoplay > <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.ogg" type="audio/ogg"> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.mp3" type="audio/mpeg"> </audio> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA