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 muy útil si desea agregar audio como canciones, entrevistas, etc. en su página web. Para incrustar audio en páginas AMP, debe utilizar la etiqueta amp-audio.
Configuración: para usar amp-audio, debe importar el componente amp-audio al encabezado de la página web.
HTML
<script async custom-element="amp-audio" src= "https://cdn.ampproject.org/v0/amp-audio-0.1.js"> </script>
Atributos:
- ancho: Define el ancho de la división de audio.
- altura: Define la altura de la división de audio.
- src: Define la fuente del archivo de audio a reproducir.
- precarga: establece el atributo de precarga en la etiqueta de audio HTML.
- reproducción automática: si está presente, inicia automáticamente el audio cuando se carga la página.
- silenciado: si está presente, establece la intensidad del volumen en 0 de forma predeterminada.
- bucle: si está presente, repite automáticamente el audio desde que comienza hasta que finaliza.
Además de los atributos anteriores, hay un atributo especial llamado controlsList que se utiliza para establecer el control del archivo de audio.
Ejemplo:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP amp-audio</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import the `amp-audio` component -->
<script async custom-element=
"amp-audio" src=
"https://cdn.ampproject.org/v0/amp-audio-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-audio/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<style amp-custom>
h1 {
color: forestgreen;
}
</style>
</head>
<body>
<center>
<h1>
Geeks For Geeks
</h1>
</center>
<amp-audio width="auto" height="50"
src="GeeksForGeeks.mp3"
controlslist="nodownload" controls>
<!-- It will displayed when the file
is not supported by the browser. -->
<div fallback>
Your browser doesn’t
support HTML5 audio...
</div>
</amp-audio>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA