amp-soundcloud

Edit on Github
Open in Playground

Introduction

Play 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.

Example

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

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

Example

<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.

Example

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