Introducción: 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.
<script async custom-element="amp-audio" src= "https://cdn.ampproject.org/v0/amp-audio-0.1.js"> </script>
Para silenciar el audio del archivo de audio, haremos uso del atributo silenciado de amp-audio.
Ejemplo:
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8" />
<title>GeeksForGeeks | 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>
<!-- The `amp-audio` component loads the
audio resource specified by its `src`
attribute at a time determined by the
runtime. `amp-audio` doesn't support
a responsive layout by default, but
you can achieve the same by combining
a `fixed` height with `width="auto"`.
Because of muted audio will be muted
by default -->
<amp-audio width="auto" height="50"
src="GeeksForGeeks.mp3" controls muted>
<!-- This division will be 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