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-trackid
替換為 data-playlistid
<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 上編輯範例-
由 @sebastianbenz 撰寫