我在使用Wavesurfer的网络项目上遇到了障碍。我在我的项目中安装了wavesurfer.js和react-wavesurfer作为节点模块。 Wavesurfer.js似乎工作正常,但反应波浪似乎遇到了我发现难以调试的问题。以下代码:
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依赖项。
非常感谢任何帮助!
答案 0 :(得分:8)
如果您仍然遇到此问题,可以创建自己的Waveform组件,该组件基本上处理相同的负载。这是一个适合我的简单示例
<强> 1。手动安装wavesurfer.js:
# taken from here: https://wavesurfer-js.org/
npm install --save wavesurfer.js@2.0.0-beta01
<强> 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>
}
答案 1 :(得分:0)
React-wavesurfer处理waveurfer实例本身的创建。所以你可以省略makeWave
部分。
import React, { Component } from 'react';
import WaveSurfer from 'react-wavesurfer';
export default class WaveComponent extends Component {
render() {
return (
<WaveSurfer audioFile="/path/to/audio.mp3" />
);
}
}
此代码适用于我。如果这不起作用,请发布您正在使用的waveurfer.js和react-wavesurfer的确切版本。
另请注意,如果使用模块捆绑器,则需要将wavesurfer.js公开为全局变量。 (希望在不久的将来不再需要) - 有关更详细的说明,请参阅https://github.com/mspae/react-wavesurfer#prerequisites-and-common-pitfalls)