反弹窗口
反应组件包装 Vavesurfer.js (英语)
背景情况
本构成部分最初以在2008年1月1日至12月31日期间开展的工作为基础 反应波突起器 以 翻译: (和 其他人员) (中文(简体) ). 在Wowsurfer-js发布第2版后,反应-波浪预测变得无法维持后,我决定开始我自己的版本比较安全,我对这个版本有更好的控制.
版本4.x
使这个组件与底部相对应 (原始内容存档于2018-03-21). wasurfer.js 我决定跳过第二版 然后直接转到第三版 随着Wasurfer现在进入第4版,我们做了必要的更新,现在也在v4上.
问题
请报告任何 问题 你遇到,我会尽力去修理.
实例
以下是一个基本演示,示例代码包含在这个repo中:
以下是我使用这个代码的个人项目的例子:
- Casts.co (英语) (原缩写)
- 剪贴板播放器 (Demo)
安装
npm install @dschoon/react-waves
或者说
yarn add @dschoon/react-waves
基本示例
import React from "react";
import ReactWaves from "@dschoon/react-waves";
import africa from "../audio/africa.mp3";
export default class BasicExample extends React.Component {
state = {
playing: false,
};
render() {
return (
<div className={"container example"}>
<div
className="play button"
onClick={() => {
this.setState({ playing: !this.state.playing });
}}
>
{!this.state.playing ? "▶" : "■"}
</div>
<ReactWaves
audioFile={africa}
className={"react-waves"}
options={{
barHeight: 2,
cursorWidth: 0,
height: 200,
hideScrollbar: true,
progressColor: "#EC407A",
responsive: true,
waveColor: "#D1D6DA",
}}
volume={1}
zoom={1}
playing={this.state.playing}
/>
</div>
);
}
}
可用的道具
props = {
playing: PropTypes.bool,
pos: PropTypes.number,
audioFile: (props, propName, componentName) => {
const prop = props[propName];
if (
prop &&
typeof prop !== "string" &&
!(prop instanceof window.Blob) &&
!(prop instanceof window.File)
) {
return new Error(`Invalid ${propName} supplied to ${componentName}
expected either string or file/blob`);
}
return null;
},
mediaElt: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(window.HTMLElement),
]),
audioPeaks: PropTypes.array,
volume: PropTypes.number,
zoom: PropTypes.number,
onPosChange: PropTypes.func,
children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
options: PropTypes.shape({
audioRate: PropTypes.number,
audioContext: PropTypes.object,
audioScriptProcessor: PropTypes.object,
autoCenter: PropTypes.bool,
backend: PropTypes.oneOf([
"WebAudio",
"MediaElement",
"MediaElementWebAudio",
]),
barGap: positiveIntegerProptype,
barHeight: positiveIntegerProptype,
barRadius: positiveIntegerProptype,
barWidth: (props, propName, componentName) => {
const prop = props[propName];
if (prop !== undefined && typeof prop !== "number") {
return new Error(`Invalid ${propName} supplied to ${componentName}
expected either undefined or number`);
}
return null;
},
closeAudioContext: PropTypes.bool,
cursorColor: PropTypes.string,
cursorWidth: positiveIntegerProptype,
fillParent: PropTypes.bool,
forceDecode: PropTypes.bool,
height: positiveIntegerProptype,
hideScrollbar: PropTypes.bool,
interact: PropTypes.bool,
loopSelection: PropTypes.bool,
maxCanvasWidth: positiveIntegerProptype,
mediaControls: PropTypes.bool,
mediaType: PropTypes.oneOf(["audio", "video"]),
minPxPerSec: positiveIntegerProptype,
normalize: PropTypes.bool,
partialRender: PropTypes.bool,
pixelRatio: PropTypes.number,
progressColor: PropTypes.string,
removeMediaElementOnDestroy: PropTypes.bool,
renderer: PropTypes.object,
responsive: PropTypes.bool,
scrollParent: PropTypes.bool,
skipLength: PropTypes.number,
splitChannels: PropTypes.bool,
waveColor: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(window.CanvasGradient),
]),
xhr: PropTypes.object,
}),
spectrogramOptions: PropTypes.object,
timelineOptions: PropTypes.object,
};
许可证
最后更新:2020年11月11日