Bento Soundcloud
Usage
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>
.
Web Component
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: Import via npm
[example preview="top-frame" playground="false"]
Install via npm:
npm install @ampproject/bento-soundcloud
import '@ampproject/bento-soundcloud';
[/example]
<script>
Example: Include via [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]
Layout and style
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%;
}
Attributes
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" ). |
Preact/React Component
The examples below demonstrate use of the <BentoSoundcloud>
as a functional component usable with the Preact or React libraries.
Example: Import via npm
[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]
Layout and style
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%;
}
Props
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" ). |