Bento

Bento Soundcloud

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css"
    />
    <style>
      bento-soundcloud {
        width: 300px;
        height: 300px;
      }
    </style>
    <style>
      body {
        background: #ecf1f3;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
</head>

<body>

    <bento-soundcloud
      id="my-track"
      data-trackid="89299804"
      data-visual="true"
    ></bento-soundcloud>
</body>

嵌入 Soundcloud 剪輯。

將 bento-soundcloud 用作網站元件或 React 函數式元件

↓ 網站元件 ↓ React / Preact

網站元件

您必須包含每個 Bento 元件的必要 CSS 函式庫，以保證正確載入，並在新增自訂樣式之前進行包含。或者使用内嵌的輕量化預升級樣式。請參閱 版面和樣式。

從 npm 導入

npm install @bentoproject/soundcloud
import {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';
defineBentoSoundcloud();

使用 <script> 包含

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css" crossorigin="anonymous">

範例

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css"
    />
    <style>
      bento-soundcloud {
        width: 300px;
        height: 300px;
      }
    </style>
</head>

<body>

<bento-soundcloud
      id="my-track"
      data-trackid="89299804"
      data-visual="true"
    ></bento-soundcloud>
</body>

版面和樣式

每個 Bento 元件都有一個小型 CSS 函式庫，您必須包含它才能保證正確載入，而不會 內容轉移。因為基於順序的特異性，您必須手動確認在任何自訂樣式之前已包含樣式表。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css"
/>

或者，您也可以使輕量化預升級樣式内嵌

<style>
  bento-soundcloud {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

容器類型

bento-soundcloud 元件已定義版面大小類型。為確保元件正確呈現，請務必透過所需的 CSS 版面（例如使用 height、width、aspect-ratio 或其他此類屬性所定義的版面）將大小套用至元件和其直接子項（投影片）。

bento-soundcloud {
  height: 100px;
  width: 100%;
}

屬性

以程式方式變更其中一個屬性將導致播放器自動更新。

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css"
    />
    <style>
      bento-soundcloud {
        width: 300px;
        height: 300px;
      }
    </style>
</head>

<body>

<bento-soundcloud
      id="my-track"
      data-trackid="89299804"
      data-visual="true"
    ></bento-soundcloud>
    <div class="buttons" style="margin-top: 8px">
      <button id="change-track">Change track</button>
    </div>

    <script>
      (async () => {
        const soundcloud = document.querySelector('#my-track');
        await customElements.whenDefined('bento-soundcloud');

        // set up button actions
        document.querySelector('#change-track').onclick = () => {
          soundcloud.setAttribute('data-trackid', '243169232');
          soundcloud.setAttribute('data-color', 'ff5500');
          soundcloud.removeAttribute('data-visual');
        };
      })();
    </script>
</body>
data-track

如果未定義 data-playlistid，此屬性為必要。此屬性值的格式為音軌 ID，是一個整數。

data-playlistid

如果未定義 data-trackid，此屬性為必要。此屬性值的格式為播放清單 ID，是一個整數。

data-secret-token（選用）

如果音軌為私人，則為其 secret token。

data-visual（選用）

如果設定為 true，會顯示全螢幕「視覺化」模式；否則會顯示為「經典」模式。預設值為 false。

data-color（選用）

此屬性是「經典」模式的自訂顏色覆寫。系統會忽略「視覺化」模式中的屬性。請指定十六進位制顏色值（例如 data-color="e540ff"），不含前導字號 (#)。

Preact/React 元件

從 npm 導入

npm install @bentoproject/soundcloud
import React from 'react';
import {BentoSoundcloud} from '@bentoproject/soundcloud/react';
import '@bentoproject/soundcloud/styles.css';

function App() {
  return <BentoSoundcloud trackId="243169232" visual={true}></BentoSoundcloud>;
}

版面和樣式

容器類型

BentoSoundcloud 組件有一個已定義的版面大小類型。為確保組件正確呈現，請務必透過期望的 CSS 版面配置（例如透過 height、width、aspect-ratio 或其他類似屬性所定義的配置）對組件及其直系子項（投影片）套用大小。這些可內嵌套用

<BentoSoundcloud
  style={{width: 300, height: 100}}
  trackId="243169232"
  visual={true}
></BentoSoundcloud>

或透過 className

<BentoSoundcloud
  className="custom-styles"
  trackId="243169232"
  visual={true}
></BentoSoundcloud>
.custom-styles {
  height: 100px;
  width: 100%;
}

性質

trackId

如果未定義 data-playlistid，則需要此屬性。
此屬性值是軌道 ID，一個整數。

playlistId

如果未定義 data-trackid，則需要此屬性。
此屬性值是播放清單 ID，一個整數。

secretToken（選用）

如果音軌為私人，則為其 secret token。

visual（選用）

如果設定為 true，會顯示全螢幕「視覺化」模式；否則會顯示為「經典」模式。預設值為 false。

color（選用）

此屬性是「經典」模式的自訂顏色覆寫。系統會忽略「視覺化」模式中的屬性。請指定十六進位制顏色值（例如 data-color="e540ff"），不含前導字號 (#)。

我們在這個網站上提供 Cookie，以分析流量並最佳化您的體驗。
更多詳情