Использование WaveSurfer.js v2 в React Component(я думаю, что есть ошибка?)
Я пытаюсь использовать WaveSurfer.js(версия 2) с React. Я знаю, что для версии 1 была библиотека под названием response-wavesurfer, но я действительно хочу сделать это с v2. Я уже испытал это, без React. Итак, я только что сделал свой компонент.
Как видно из приведенного ниже кода, все работает отлично, объект WaveSurfer генерируется правильно в componentDidMount()
но потом, внезапно, в load()
метод, есть ошибка, которую я не могу правильно понять.
Эта ошибка выдается после load()
, и после ошибки, он вошел в консоль "Там это происходит!" и волновое свойство государства, как и должно быть.
Это ошибка, о которой идет речь, и сама по себе она ничего не значит. Это просто ошибка без трассировки стека в запутанной функции в реакции наложения ошибок. Вторая ошибка, DOMException, напрямую вызвана первой, и они каждый раз выбрасываются вместе.
Это строка наложения реагирующих ошибок, которая непосредственно вызывает ошибку, в /node_modules/react-error-overlay/index.js:1582
, но это запутано.
// ... various imports
class Track extends Component {
wavref = null;
constructor(props) {
super(props);
let id = this.props.id;
this.state = {
id: id,
wave: null
};
}
load() {
console.log(this.state.wave, this.props.audio); // this.props.audio is the correct path, and should work correctly: "../../demo.wav".
this.state.wave.load(this.props.audio);
console.log("There it happens!", this.state.wave);
}
componentDidMount() {
let generatedWave = WaveSurfer.create({
container: ReactDOM.findDOMNode(this.waveref),
waveColor: this.state.color,
progressColor: this.state.progressColor,
plugins: [
RegionsPlugin.create({
dragSelection: {
slop: 5
}
}),
CursorPlugin.create({})
]
});
this.setState({
wave: generatedWave,
}, function() {
this.load();
});
}
render() {
return(
<div ref={(waveref) => this.waveref = waveref}></div>
);
}
}
export default Track;
Очевидно, что load()
Метод не загружает / не отображает фактическую волну на холсте WaveSurfer, и выдает эту ошибку. Я не могу понять почему, потому что он должен просто работать нормально и визуализировать волну на холсте WaveSurfer.
Кто-нибудь из вас знает, в чем может быть ошибка?