amp-soundcloud
簡介
使用 amp-soundcloud 元件從 AMP HTML 檔案中播放 Soundcloud 曲目。
設定
匯入 amp-soundcloud 元件。
<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>
經典模式
您可以在 Soundcloud 嵌入碼中找到 trackid。唯一支援的版面配置模式為 fixed-height。從 Soundcloud 嵌入碼取得高度。
<amp-soundcloud height="166" layout="fixed-height" data-trackid="89299804"></amp-soundcloud>
具備自訂色彩的經典模式
經典模式允許透過 data-color 屬性設定自訂色彩。
<amp-soundcloud height="166" layout="fixed-height" data-trackid="89299804" data-color="448AFF"></amp-soundcloud>
視覺模式
視覺模式不允許變更色彩。請務必使用與 Soundcloud 嵌入碼相同的高度。
<amp-soundcloud height="450" layout="fixed-height" data-trackid="89299804" data-visual="true"></amp-soundcloud>
播放清單模式
播放清單模式允許透過其 ID (在 Soundcloud 嵌入碼中找到) 嵌入完整的 Soundcloud 播放清單。唯一的變更是以 data-playlistid 取代 data-trackid
<amp-soundcloud height="450" layout="fixed-height" data-playlistid="331919427" data-visual="true"></amp-soundcloud>
支援的屬性
還有用於色彩和秘密權杖的屬性。若要以 RGB 十六進位設定播放按鈕的色彩，請使用 data-color。若要嵌入私人曲目和播放清單，請使用 data-secret-token 屬性。
<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 上編輯範例-