@ampproject/amp-soundcloud
Advanced tools
The Bento Soundcloud component allows you to embed a Soundcloud clip. Use it as a web component <bento-soundcloud>, or a Preact/React functional component <BentoSoundcloud>.
You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See Layout and style.
The examples below demonstrate use of the <bento-soundcloud> web component.
[example preview="top-frame" playground="false"]
Install via npm:
npm install @ampproject/bento-soundcloud
import '@ampproject/bento-soundcloud';
[/example]
<script>[example preview="top-frame" playground="false"]
<head>
<script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
<!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
<style data-bento-boilerplate>
bento-soundcloud {
display: block;
overflow: hidden;
position: relative;
}
</style>
<script async src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js"></script>
<style>
bento-soundcloud {
aspect-ratio: 1;
}
</style>
</head>
<bento-soundcloud
id="my-track"
data-trackid="243169232"
data-visual="true"
></bento-soundcloud>
<div class="buttons" style="margin-top: 8px;">
<button id="change-track">
Change track
</button>
</div>
<script>
(async () => {
const soundcloud = document.querySelector('#my-track');
await customElements.whenDefined('bento-soundcloud');
// set up button actions
document.querySelector('#change-track').onclick = () => {
soundcloud.setAttribute('data-trackid', '243169232')
soundcloud.setAttribute('data-color', 'ff5500')
soundcloud.removeAttribute('data-visual')
}
})();
</script>
[/example]
Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css">
Alternatively, you may also make the light-weight pre-upgrade styles available inline:
<style data-bento-boilerplate>
bento-soundcloud {
display: block;
overflow: hidden;
position: relative;
}
</style>
Container type
The bento-soundcloud component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with height, width, aspect-ratio, or other such properties):
bento-soundcloud {
height: 100px;
width: 100%;
}
| data-trackid | This attribute is required if data-playlistid is not defined.The value for this attribute is the ID of a track, an integer. |
| data-playlistid | This attribute is required if data-trackid is not defined.
The value for this attribute is the ID of a playlist, an integer. |
| data-secret-token (optional) | The secret token of the track, if it is private. |
| data-visual (optional) | If set to true, displays full-width "Visual" mode; otherwise, it displays as "Classic" mode. The default value is false. |
| data-color (optional) | This attribute is a custom color override for the "Classic" mode. The attribute is ignored in "Visual" mode. Specify a hexadecimal color value, without the leading # (e.g., data-color="e540ff"). |
The examples below demonstrate use of the <BentoSoundcloud> as a functional component usable with the Preact or React libraries.
[example preview="top-frame" playground="false"]
Install via npm:
npm install @ampproject/bento-soundcloud
import React from 'react';
import { BentoSoundcloud } from '@ampproject/bento-soundcloud/react';
import '@ampproject/bento-soundcloud/styles.css';
function App() {
return (
<BentoSoundcloud trackId="243169232" visual={true}>
</BentoSoundcloud>
);
}
[/example]
Container type
The BentoSoundcloud component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with height, width, aspect-ratio, or other such properties). These can be applied inline:
<BentoSoundcloud style={{width: '300px', height: '100px'}} trackId="243169232" visual={true}>
</BentoSoundcloud>
Or via className:
<BentoSoundcloud className='custom-styles' trackId="243169232" visual={true}>
</BentoSoundcloud>
.custom-styles {
height: 100px;
width: 100%;
}
| trackId | This attribute is required if data-playlistid is not defined.The value for this attribute is the ID of a track, an integer. |
| playlistId | This attribute is required if data-trackid is not defined.
The value for this attribute is the ID of a playlist, an integer. |
| secretToken (optional) | The secret token of the track, if it is private. |
| visual (optional) | If set to true, displays full-width "Visual" mode; otherwise, it displays as "Classic" mode. The default value is false. |
| color (optional) | This attribute is a custom color override for the "Classic" mode. The attribute is ignored in "Visual" mode. Specify a hexadecimal color value, without the leading # (e.g., data-color="e540ff"). |
FAQs
AMP HTML amp-soundcloud Component
The npm package @ampproject/amp-soundcloud receives a total of 74 weekly downloads. As such, @ampproject/amp-soundcloud popularity was classified as not popular.
We found that @ampproject/amp-soundcloud demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 16 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.