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.

Displays a Soundcloud clip.

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

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>

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.

See amp-soundcloud rules in the AMP validator specification.

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.