Do you build things with AMP? Fill out the AMP Developer Survey!
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