Muchas veces como desarrollador queremos agregar un archivo de audio en la página web. 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.
Ejemplo:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP amp-audio</title>
<!-- Import the mandatory script -->
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element="amp-audio"
src="https://cdn.ampproject.org/v0/amp-audio-0.1.js">
</script>
<link rel="canonical" href="geeksforgeeks.html">
<!-- It is mandatory meta tag. -->
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<!-- Add the following boilerplate
tag as it is. -->
<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>
<!-- This is custom amp-style -->
<style amp-custom>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>
Geeks For Geeks
</h1>
<amp-audio width="auto" height="50"
src="GeeksForGeeks.mp3">
<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