
El elemento html audio se utiliza para incrustar contenido de audio en documentos, y este puede contener uno o más archivos de origen que se representan mediante la propiedad src
o mediante el elemento <source>
. El navegador elegirá el archivo de audio más apropiado para reproducir.
El siguiente ejemplo usa el elemento <audio>
con la propiedad autoplay
para reproducir el audio automáticamente, especificando la URL del archivo fuente a través de la propiedad src
:
< audio src = "pista1.mp3" autoplay > Su navegador no es compatible con el elemento < code > audio </ code > . </ audio >
El siguiente ejemplo contiene el elemento <audio>
con el uso de una propiedad controls
para agregar botones para controlar el clip, y la URL del clip se especificará a través del elemento <source>
:
< audio controls = "controls" > < source src = "pista1.ogg" type = "audio / ogg" > < source src = "pista1.mp3" type = "audio / mpeg" > < code > el elemento de audio no es compatible por su navegador </ code > . </ audio >
Etiqueta html audio
Clasificaciones de contenido | Un elemento organizativo, un elemento normal, un elemento que contiene medios incrustados o un elemento interactivo. |
---|---|
Contenido permitido | Si un elemento src tiene la propiedad, puede tener <track> uno o más elementos seguidos de contenido regular que no incluye los dos elementos <audio> y <video> . Si no tiene la propiedad src , puede contener <source> uno o más elementos, seguidos de <track> uno o más elementos, y un contenido regular que no incluya el elemento <audio> y <video> . |
Acrónimo | Las etiquetas de inicio o finalización no se pueden omitir. |
Elementos del padre | Cualquier elemento que acepte elementos incrustados. |
Interfaz DOMO | HTMLAudioElement |
Características
Algunas funciones HTML5 recién agregadas no funcionan en todos los navegadores. En este elemento html audio se pueden utilizar propiedades globales.
autoplay
Esta función es booleana y si se usa (¡incluso si es un valor "false"
!) comenzará a reproducir la pista de audio lo más rápido posible, sin esperar a que se descargue todo el archivo de audio. Tenga en cuenta que los sitios que reproducen audio automáticamente (o reproducen videos con audio) pueden molestar a los usuarios.
Por lo que esta función debe evitarse a menos que sea necesario y, si es absolutamente necesario, haga que esta función sea opcional y solicite al usuario que la habilite. Sin embargo, puede beneficiarse de esta función si el propósito principal de la página es reproducir un clip de audio específico.
buffered
Una propiedad elegible para especificar qué campos del clip de audio se descargaron, ya que esta propiedad contiene un objeto TimeRanges
.
controls
Si esta función está presente, el navegador proporcionará controles para permitir al usuario controlar la reproducción de audio, incluido el volumen, moverse a diferentes posiciones en el clip de audio, pausar, reproducir y otras.
loop
Esta propiedad es booleana y, si está presente, el clip se reproducirá desde el principio después de llegar al final. El siguiente ejemplo usa el elemento <audio>
con la propiedad loop
para reproducir el clip una vez terminado:
< audio src = "pista.mp3" controls = "controls" loop = "loop" > Su navegador no es compatible con el elemento < code > audio </ code > . </ audio >
muted
Booleano Esta propiedad indica si el clip se amortiguó inicialmente. El valor predeterminado es false
. El siguiente ejemplo usa el elemento <audio>
con la propiedad mute
para silenciar automáticamente el sonido:
< audio src = "pista.mp3" controls = "controls" muted = "muted" > Su navegador no es compatible con el elemento < code > audio </ code > . </ audio >
played
Esta propiedad es legible y contiene un objeto TimeRanges
que indica los dominios que el usuario ha reproducido desde el clip de audio.
preload
El propósito de esta función es darle al navegador una idea de lo que el desarrollador de la página piensa que es mejor para la experiencia del usuario y toma uno de los siguientes valores:
none
: El clip de audio no debe estar precargado.metadata
: Solo se deben cargar metadatos (por ejemplo, duración del clip).auto
: Indica que el clip de audio se puede cargar incluso si no se espera que el usuario lo reproduzca.- Si el valor es una cadena vacía, es equivalente a la propiedad auto.
Si no se establece el valor de esta propiedad, el valor predeterminado se tomará del navegador (cada navegador tiene su propio valor predeterminado), pero la especificación recomienda que los navegadores tengan el valor predeterminado de metadata
.
Tenga en cuenta que la propiedad autoplay
tiene prioridad sobre la propiedad preload
, por lo que si autoplay
se especifica la propiedad, tiene sentido que el navegador comience a descargar el clip de audio directamente.
Cabe señalar que la especificación no obliga al navegador a seguir el valor de esta propiedad, es solo una pista de lo que quiere el desarrollador de la página. El siguiente ejemplo usa el elemento <audio>
con la propiedad preload
para decirle al navegador que no cargue el clip de audio cuando se carga la página:
< audio src = "pista.ogg" preload = "none" > Su navegador no es compatible con el elemento < code > audio </ code > . </ audio >
src
Esta propiedad contiene la URL del archivo de audio que se cargará. Esta propiedad es opcional y puede usar el elemento <source>
dentro del elemento <audio>
para especificar la URL de los clips de audio que desea incluir.
volume
El volumen al que se reproducirá el clip, que va de 0.0
(silencioso) a 1.0
(más alto).
Descripción de uso
Puede agregar contenido alternativo para navegadores que no admiten el elemento <audio>
entre marcar el inicio <audio>
y la etiqueta de cierre </audio>
.
La forma más sencilla de agregar controles es usando una propiedad controls
. Para agregar controles avanzados, esto se puede hacer a través de la API de Medial.
También puede utilizar la API de Web Audio para generar o modificar audio a través de JavaScript.
Es cierto que un elemento <video>
puede mostrar la sección de subtítulos (subtítulos) a través del elemento <track>
, pero los elementos <audio>
no pueden hacerlo, e ignorarán cualquier elemento <track>
dentro de marcar el inicio <audio>
y la etiqueta de cierre </audio>
.
Soporte de navegadores
Chrome | Firefox | Edge | Safari | Ópera |
---|---|---|---|---|
Soportado | Soportado | Soportado | Soportado | Soportado |
- Descripción de las Etiquetas HTML
- El Texto en HTML
- Elemento a en HTML
- Elemento abbr en HTML
- Elemento address en HTML
- Elemento area en HTML
- Elemento article en HTML
- Elemento aside en HTML
- Elemento audio en HTML
- Elemento b en HTML
- Elemento base en HTML
- Elemento bdi en HTML
- Elemento bdo en HTML
- Elemento blockquote en HTML
- Elemento body en HTML
- Elemento br en HTML
- Elemento button en HTML
- Elemento canvas en HTML
- Elemento caption en HTML
- Elemento cite en HTML
- Elemento code en HTML
- Elemento col en HTML
- Elemento colgroup en HTML
- Elemento data en HTML
- Elemento datalist en HTML
- Elemento dd en HTML
- Elemento del en HTML
- Elemento details en HTML
- Elemento dfn en HTML
- Elemento div en HTML
- Elemento dl en HTML
- Elemento dt en HTML
- Elemento em en HTML
- Elemento embed en HTML
- Elemento fieldset en HTML
- Elemento figcaption en HTML
- Elemento figure en HTML
- Elemento footer en HTML
- Elemento form en HTML
- Elemento head en HTML
- Elemento header en HTML
- Elemento hr en HTML