جدول المحتويات

Important: this documentation is not applicable to your currently selected format ads!

amp-soundcloud

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Displays a Soundcloud clip.

Required Scripts

<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>

Supported Layouts

fill fixed fixed-height flex-item intrinsic nodisplay responsive

Examples

With the responsive layout, the width and height from the example should yield correct layouts for 1:1 aspect ratio embeds:

Visual Mode:

<amp-soundcloud
  width="480"
  height="480"
  layout="responsive"
  data-trackid="243169232"
  data-visual="true"
></amp-soundcloud>

Classic Mode:

<amp-soundcloud
  width="480"
  height="480"
  layout="responsive"
  data-trackid="243169232"
  data-color="ff5500"
></amp-soundcloud>

Attributes

data-trackid	This attribute is required if `data-playlistid` is not defined. The value for this attribute is the ID of a track, an integer.
data-playlistid	This attribute is required if `data-trackid` is not defined. The value for this attribute is the ID of a playlist, an integer.
data-secret-token (optional)	The secret token of the track, if it is private.
data-visual (optional)	If set to `true`, displays full-width "Visual" mode; otherwise, it displays as "Classic" mode. The default value is `false`.
data-color (optional)	This attribute is a custom color override for the "Classic" mode. The attribute is ignored in "Visual" mode. Specify a hexadecimal color value, without the leading # (e.g., `data-color="e540ff"`).
width and height	The layout for `amp-soundcloud` is set to `fixed-height` and it fills all of the available horizontal space. This is ideal for the "Classic" mode, but for "Visual" mode, it's recommended that the height is 300px, 450px or 600px, as per Soundcloud embed code. This will allow the clip's internal elements to resize properly on mobile.

Validation

See amp-soundcloud rules in the AMP validator specification.

هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow

هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub