3

我正在尝试将 WaveSurfer.js（版本 2）与 React 一起使用。我知道对于版本 1，有一个名为 react-wavesurfer 的库，但我真的很想用 v2 来做。我已经体验过了，没有 React。所以，我只是做了一个我的组件。

正如您在下面的代码中所见，一切正常，WaveSurfer 对象在其中正确生成，componentDidMount()但是突然之间，在load()方法中出现了一个我无法正确理解的错误。

这个错误是在 之后抛出的load()，并且在错误之后，它会登录到控制台“发生了！” 和状态的波属性，应该是。

这是有问题的错误，它本身并不意味着什么。这只是 react-error-overlay 中混淆函数中没有堆栈跟踪的错误。第二个错误，DOMException，是第一个直接导致的，每次都扔在一起。

这是直接导致错误的 react-error-overlay 行， in /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 画布中渲染波浪。

你们中有人知道错误是什么吗？

4

0 回答 0