AMP
  • websites

amp-soundcloud

Introduction

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

Setup

Import the amp-soundcloud component.

<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></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 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

编辑 GitHub 上的示例