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