安装
npm install @arraypress/waveform-player
从 CDN 装入并自动初始化 [data-waveform-player] 页面中:
<link rel="stylesheet" href="https://unpkg.com/@arraypress/waveform-player/dist/waveform-player.css">
<script src="https://unpkg.com/@arraypress/waveform-player/dist/waveform-player.min.js"></script>
<div data-waveform-player data-url="track.mp3" data-title="My Song" data-artist="The Artist"></div>
或从JavaScript驱动它:
import WaveformPlayer from '@arraypress/waveform-player';
new WaveformPlayer('#player', { url: 'track.mp3', title: 'My Song', artist: 'The Artist' });
仅初始化您控制的内容
使自己不编写标记的页面——用户内容,一个CMS,一个编辑画布——可以从文档元素中关闭自动扫描:
<html data-waveform-autoinit="false">
在你要求之前没有东西是初始化的 过 init() 仅扫描您拥有的子树的根 :
WaveformPlayer.init( document.querySelector( '#my-app' ) );
构造玩家直接仍然有效;只有导入时的扫描被压制.
这个属性是用于页面的. 狦琌 捆绑成一个你没有写的页面 —— CMS 块,插件,部件掉入他人模板——没有 <html> 在范围中标注在您之前 import 评估。 导入没有扫描的库 :
import WaveformPlayer from '@arraypress/waveform-player/no-autoinit';
// Identical in every other way. Nothing is initialized until you say so:
WaveformPlayer.init( myContainer );
new WaveformPlayer( el, { url: 'track.mp3' } );
同样的课,相同的选项,相同的 window.WaveformPlayer船舶作为无害环境管理和CJS。 每捆选择一个入境点——每个入境点都带有自己的类别副本和自己的实例登记册.
这种瞄准镜初始化——它不是消毒剂. playIcon 编号 : pauseIcon (及其资源) data-play-icon 编号 : data-pause-icon 等值),针对任何您所构建的玩家按设计注入原始标记. 未经信任的内容在到达页面前仍需进行消毒.
文档
每个选项、风格、事件和方法都记录在文件网站上.
- > (中文) docs.waveformplayer.com 请检查url=值 (帮助)
选项 • 妇女 波形样式 • 妇女 活动 • 妇女 方法 • 妇女 无障碍
扩展名 : 栏 • 妇女 播放列表 • 妇女 跟踪器 • 妇女 常规 —— 说 框架: 反应 • 妇女 阴道 • 妇女 丝绒 • 妇女 天体
许可证
麻省理工学院 矩阵压力