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 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

您必须包含每个 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（可选）

音轨的密钥令牌（如果它是私有的）。

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（可选）

音轨的密钥令牌（如果它是私有的）。

visual（可选）

如果设置为 true，将显示全宽“可视化”模式；否则，将显示为“经典”模式。默认值为 false。

color（可选）

此属性是对“经典”模式的自定义颜色覆盖。该属性在“可视化”模式中被忽略。指定十六进制颜色值，不带前导 #（例如，data-color="e540ff"）。

我们在此网站上使用 Cookie 来分析流量并优化您的体验。
更多详情