Bento Soundcloud
Embeds a Soundcloud clip.
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.
Import via npm
npm install @bentoproject/soundcloudimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';
defineBentoSoundcloud();Include via <script>
<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css" crossorigin="anonymous">Example
<!DOCTYPE html>
<html>
<head>
<script
type="module"
async
src="https://cdn.ampproject.org/bento.mjs"
></script>
<script nomodule src="https://cdn.ampproject.org/bento.js"></script>
<script
type="module"
async
src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs"
></script>
<script
nomodule
async
src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css"
/>
<style>
bento-soundcloud {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<bento-soundcloud
id="my-track"
data-trackid="89299804"
data-visual="true"
></bento-soundcloud>
</body>
</html>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>
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
Programmatically changing one of the attributes will result in the player being automatically updated.
<!DOCTYPE html>
<html>
<head>
<script
type="module"
async
src="https://cdn.ampproject.org/bento.mjs"
></script>
<script nomodule src="https://cdn.ampproject.org/bento.js"></script>
<script
type="module"
async
src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs"
></script>
<script
nomodule
async
src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css"
/>
<style>
bento-soundcloud {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<bento-soundcloud
id="my-track"
data-trackid="89299804"
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>
</body>
</html>data-track
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
Import via npm
npm install @bentoproject/soundcloudimport React from 'react';
import {BentoSoundcloud} from '@bentoproject/soundcloud/react';
import '@bentoproject/soundcloud/styles.css';
function App() {
return <BentoSoundcloud trackId="243169232" visual={true}></BentoSoundcloud>;
}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: 300, height: 100}}
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").