Embeds a Soundcloud clip.
npm install @bentoproject/soundcloudEmbeds a Soundcloud clip.
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.
``sh`
npm install @bentoproject/soundcloud
`javascript`
import {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';
defineBentoSoundcloud();
`html`
`html`
type="module"
async
src="https://cdn.ampproject.org/bento.mjs"
>
type="module"
async
src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs"
>
nomodule
async
src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js"
>
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css"
/>
data-trackid="89299804"
data-visual="true"
>
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.
`html`
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:
`html`
#### 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):
`css`
bento-soundcloud {
height: 100px;
width: 100%;
}
Programmatically changing one of the attributes will result in the player being automatically updated.
`html
type="module"
async
src="https://cdn.ampproject.org/bento.mjs"
>
type="module"
async
src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs"
>
nomodule
async
src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js"
>
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css"
/>
data-trackid="89299804"
data-visual="true"
>
`
##### 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").
---
`sh`
npm install @bentoproject/soundcloud
`javascript
import React from 'react';
import {BentoSoundcloud} from '@bentoproject/soundcloud/react';
import '@bentoproject/soundcloud/styles.css';
function App() {
return
}
`
#### 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:
`jsx`
trackId="243169232"
visual={true}
>
Or via className:
`jsx`
trackId="243169232"
visual={true}
>
`css``
.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").