Использование 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.

Кто-нибудь из вас знает, в чем может быть ошибка?

0 ответов

Другие вопросы по тегам