#BlackLivesMatter
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>
Daha fazla açıklamaya mı ihtiyacınız var?

Bu sayfadaki açıklamalar tüm sorularınıza yanıt vermiyorsa, özgün kullanım durumunuzu tartışmak üzere diğer AMP kullanıcılarına ulaşmaktan çekinmeyin.

Stack Overflow'a git
Açıklanmayan bir özellik mi var?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

Örneği GitHub'ta düzenle