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.

$3

``sh
npm install @bentoproject/soundcloud
`

`javascript
import {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';
defineBentoSoundcloud();
`

$3

`html





`

$3

`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"
/>



id="my-track"
data-trackid="89299804"
data-visual="true"
>


`

$3

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%;
}
`

$3

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"
/>



id="my-track"
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").

---

Preact/React Component

$3

`sh
npm install @bentoproject/soundcloud
`

`javascript
import React from 'react';
import {BentoSoundcloud} from '@bentoproject/soundcloud/react';
import '@bentoproject/soundcloud/styles.css';

function App() {
return ;
}
`

$3

#### 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
style={{width: 300, height: 100}}
trackId="243169232"
visual={true}
>
`

Or via className:

`jsx
className="custom-styles"
trackId="243169232"
visual={true}
>
`

`css
.custom-styles {
height: 100px;
width: 100%;
}
``

$3

##### 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").