SoundCloud es un sitio web de distribución y uso compartido de audio en línea. La música y la lista de reproducción se pueden incrustar en una página HTML de AMP utilizando el componente amp-soundcloud que se puede usar para tener sus canciones favoritas o la lista de reproducción de SoundCloud en su sitio web.
Enlace de SoundCloud: https://soundcloud.com/
Scripts requeridos: importar el componente amp-soundcloud
HTML
<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"> </script>
Atributo:
- data-playlistid: debe especificarse si no se especifica data-trackid. Esta es una identificación de una lista de reproducción en SoundCloud.
- data-trackid: debe especificarse si no se especifica data-playlistid. Esta es una identificación de una pista en SoundCloud.
- data-visual: si se establece como verdadero modo visual de ancho completo, se establece.
- data-color: establece un color específico que anula el valor predeterminado. El color debe especificarse en un número hexadecimal.
Ejemplo:
HTML
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Google AMP amp-soundcloud</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!--Import the `amp-soundcloud` component.-->
<script async custom-element="amp-soundcloud"
src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-soundcloud/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>
</head>
<body>
<!--fixed-height layout-->
<amp-soundcloud height="200"
layout="fixed-height"
data-trackid="89299804">
</amp-soundcloud>
<!--data-color mentioned.-->
<amp-soundcloud height="200"
layout="fixed-height"
data-trackid="89299804"
data-color="448AFF">
</amp-soundcloud>
<!-- allows embedding Soundcloud playlist-->
<amp-soundcloud height="350"
layout="fixed-height"
data-playlistid="331919427"
data-visual="true">
</amp-soundcloud>
</body>
</html>
Producción :
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA