@10up/component-audio 中文文档教程

发布于 3年前 浏览 21 项目主页 更新于 3年前

注意:这是一个非常初始的过程。 建议等待第一次使用,直到完全测试。 更新即将到来。

10up Audio component

支持级别许可证:MIT Build Status

Installation

NPM

npm install --save @10up/component-audio

Standalone

克隆这个 repo 并导入 < dist/ 目录中的 code>audio.js 和 audio.css

Methods

下面列出了最新支持的回调。 每个回调接收播放器的一个实例。

onplay

当音频已经开始或不再暂停时触发

onplay: (playerInstance) => {}

onpause

当音频/视频暂停时触发

onpause: (playerInstance) => {}

onerror

在音频加载过程中发生错误时触发

onerror: (playerInstance) => {}

onloadstart

当浏览器开始寻找音频时触发

onloadstart: (playerInstance) => {}

onended

当前播放列表结束时触发

onended: (playerInstance) => {}

onplaying

在暂停或停止缓冲后播放音频时触发

onplaying: (playerInstance) => {}

onprogress

在浏览器下载音频时触发

onprogress: (playerInstance) => {}

onseeking

当用户开始移动/跳到音频中的新位置时触发

onseeking: (playerInstance) => {}

onseeked

当用户完成移动/跳到音频中的新位置时触发

onseeked: (playerInstance) => {}

ontimeupdate

当前播放位置改变时触发

ontimeupdate: (playerInstance) => {}

onvolumechange

当音量改变时触发

onvolumechange: (playerInstance) => {}

Properties

以下是可选属性及其类型和用法的列表。

| 物业 | 默认值 | 类型 | 用法 | |-|-|-|-| | 播放标签 | 播放 | 字符串 | 播放按钮的标签 | | 播放标签 | 停止 | 字符串 | 停止按钮的标签 | | 停止标签 | 停止 | 字符串 | 暂停按钮的标签 | | 暂停标签 | 暂停 | 字符串 | 静音按钮的标签 | | 静音标签 | 静音 | 字符串 | 静音按钮的标签 | | 卷标 | 卷 | 字符串 | 音量滑块的标签 | | 洗涤器标签 | 擦洗时间表 | 字符串 | 洗涤器滑块的标签 | | 当前时间标签 | 总时间 | 字符串 | 总时间标签 | | 显示静音 | 真 | 布尔值 | 也许显示静音按钮 | | 显示停止 | 真 | 布尔值 | 也许显示停止按钮 | | 显示计时器 | 真 | 布尔值 | 也许显示定时器控件 | | 显示音量 | 真 | 布尔值 | 也许显示音量滑块 | | 显示洗涤器 | 真 | 布尔值 | 也许显示洗涤器控件 | | 本地存储 | 真 | 布尔值 | 也许启用 localStorage。 这允许用户重新加载页面,并从他们上次离开的地方继续。 | | 调试 | 真 | 布尔值 | 也许打开调试模式。 调试模式在浏览器的控制台窗口中输出有用的信息。 |

Usage

这是组件期望的标记模板。 使用 HTML 音频播放器,用包含类的元素包装。 在这里,我们使用带有“音频”类的 div。

Markup

<div class="audio">
    <audio controls>
        <source src="path/to/audio-file.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</div> <!-- //.audio -->

JavaScript

通过提供用于音频的选择器和包含任何必要回调函数的对象来创建新实例。

import Audio from '@10up/component-audio';

const audioInstance = new Audio( '.audio', { ...options } );

CSS

即将推出

Demo

即将推出

Tests

即将推出

Support Level

活动:10up 正在为此积极努力,我们希望在可预见的未来继续努力,包括保持对最新版本 WordPress 的测试。 欢迎错误报告、功能请求、问题和请求请求。

Like what you see?

NOTE: This is a very initial pass. Recommend waiting on first usage until fully tested. Updates coming shortly.

10up Audio component

Support LevelLicense: MITBuild Status

Installation

NPM

npm install --save @10up/component-audio

Standalone

Clone this repo and import audio.js and audio.css from the dist/ directory.

Methods

The following lists the latest supported callbacks. Each callback receives an instance of the player.

onplay

Fires when the audio has been started or is no longer paused

onplay: (playerInstance) => {}

onpause

Fires when the audio/video has been paused

onpause: (playerInstance) => {}

onerror

Fires when an error occurred during the loading of an audio

onerror: (playerInstance) => {}

onloadstart

Fires when the browser starts looking for the audio

onloadstart: (playerInstance) => {}

onended

Fires when the current playlist is ended

onended: (playerInstance) => {}

onplaying

Fires when the audio is playing after having been paused or stopped for buffering

onplaying: (playerInstance) => {}

onprogress

Fires when the browser is downloading the audio

onprogress: (playerInstance) => {}

onseeking

Fires when the user starts moving/skipping to a new position in the audio

onseeking: (playerInstance) => {}

onseeked

Fires when the user is finished moving/skipping to a new position in the audio

onseeked: (playerInstance) => {}

ontimeupdate

Fires when the current playback position has changed

ontimeupdate: (playerInstance) => {}

onvolumechange

Fires when the volume has been changed

onvolumechange: (playerInstance) => {}

Properties

The following is a list of optional properties, their types and usages.

| Property | Default value | Type | Usage | |-|-|-|-| | playLabel | Play | String | Label for the play button | | playLabel | Stop | String | Label for the stop button | | stopLabel | Stop | String | Label for the pause button | | pauseLabel | Pause | String | Label for the mute button | | muteLabel | Mute | String | Label for the mute button | | volumeLabel | Volume | String | Label for the volume slider | | scrubberLabel | Scrub Timeline | String | Label for the scrubber slider | | currentTimeLabel | Total Time | String | Label for the total time | | showMute | true | Boolean | Maybe show the mute button | | showStop | true | Boolean | Maybe show the stop button | | showTimer | true | Boolean | Maybe show the timer control | | showVolume | true | Boolean | Maybe show the volume slider | | showScrubber | true | Boolean | Maybe show the scrubber control | | localStorage | true | Boolean | Maybe enable localStorage. This allows a user to reload the page, and pickup where they last left off. | | debug | true | Boolean | Maybe turn on debug mode. Debug mode outputs helpful information in the console window of the browser. |

Usage

This is the markup template expected by the component. Use an HTML audio player, wrapped with an element containing a class. Here we use a div with a class of 'audio'.

Markup

<div class="audio">
    <audio controls>
        <source src="path/to/audio-file.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</div> <!-- //.audio -->

JavaScript

Create a new instance by supplying the selector to use for the audio and an object containing any necessary callback functions.

import Audio from '@10up/component-audio';

const audioInstance = new Audio( '.audio', { ...options } );

CSS

Coming soon

Demo

Coming soon

Tests

Coming soon

Support Level

Active: 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome.

Like what you see?

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文