• websites



Use the amp-soundcloud component topPlay soundcloud tracks from within AMP HTML files.


Import the amp-soundcloud component.

<script async custom-element="amp-soundcloud" src=""></script>

Classic mode

You can find the trackid in the Soundcloud embed code. The only supported layout mode is fixed-height. Get the height from the Soundcloud embed code.

<amp-soundcloud height="166" layout="fixed-height" data-trackid="89299804"></amp-soundcloud>

Classic mode with custom color

The classic mode allows setting a custom color via the data-color attribute.

<amp-soundcloud height="166" layout="fixed-height" data-trackid="89299804" data-color="448AFF"></amp-soundcloud>

Visual mode

The visual mode doesn't allow changing the color. Make sure to use the same height as the Soundcloud embed code.

<amp-soundcloud height="450" layout="fixed-height" data-trackid="89299804" data-visual="true"></amp-soundcloud>

Playlist mode

The playlist mode allows embedding a full Soundcloud playlist by its ID (found in the Soundcloud embed code). The only change is the substitution of data-trackid by data-playlistid

<amp-soundcloud height="450" layout="fixed-height" data-playlistid="331919427" data-visual="true"></amp-soundcloud>

Supported attributes

There are also attributes for color and secret token. To set color for the play button in RGB hexadecimal, use data-color. To embed private tracks and playlists use data-secret-token attribute.

<amp-soundcloud height="450" layout="fixed-height" data-playlistid="331919427" data-color="ff0000" data-secret-token="yoursecrettoken" data-visual="true"></amp-soundcloud>

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する