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>
Para hacer que el audio comience automáticamente cuando finaliza el archivo de audio, utilizamos el atributo de bucle en amp-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" controls loop>
<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