我在使用 Wavesurfer 的网络项目中遇到了障碍。我已经在我的项目中安装了wavesurfer.js 和react-wavesurfer 作为节点模块。 Wavesurfer.js 似乎工作正常,但 React-wavesurfer 似乎遇到了我发现难以调试的问题。下面的代码:
import React from "react";
import WaveSurfer from "wavesurfer.js"
import ReactWavesurfer from "react-wavesurfer";
class Waveform extends React.Component {
makeWave() {
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'red',
progressColor: 'purple'
});
wavesurfer.load('path/to/mp3');
};
render() {
this.makeWave();
return (
<div>
<ReactWavesurfer
audioFile={'path/to/mp3'}
/>
</div>
);
}
}
export default Waveform;
仅产生调用 this.makeWave() 的第一个波形。尝试创建 React 波形时它会返回错误:Uncaught TypeError: this._wavesurfer.init is not a function
。我正在使用 browserify 来捆绑我的 javascript 依赖项。
任何帮助将非常感激!
如果您仍然遇到问题,您可以创建自己的波形组件来处理相同的负载。这是一个对我有用的简单例子
1.手动安装wavesurfer.js:
# taken from here: https://wavesurfer-js.org/
npm install --save [email protected] /cdn-cgi/l/email-protection
2. 构建自定义波形组件:
// components/waveform.js
import React from 'react'
import ReactDOM from 'react-dom'
import WaveSurfer from 'wavesurfer.js'
export default class Waveform extends React.Component {
constructor(props) {
super(props)
this.state = {
}
}
componentDidMount() {
this.$el = ReactDOM.findDOMNode(this)
this.$waveform = this.$el.querySelector('.wave')
this.wavesurfer = WaveSurfer.create({
container: this.$waveform,
waveColor: 'violet',
progressColor: 'purple'
})
this.wavesurfer.load(this.props.src)
}
componentWillUnmount() {
}
render() {
return (
<div className='waveform'>
<div className='wave'></div>
</div>
)
}
}
Waveform.defaultProps = {
src: ""
}
3.然后,在父组件中:
// components/my-parent-component.js
import Waveform from 'path/to/components/Waveform'
...
render() {
return <div clasName='parent-component'><Waveform src={'/path/to/audio/src.mp3'} /></div>
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)