Wavesurfer.js工作正常，但是react-wavesurfer有问题 [英] Wavesurfer.js is working fine, but react-wavesurfer has issues

问题描述

我在使用Wavesurfer的Web项目中遇到了障碍。我已经在项目中安装了waveurfer.js和react-wavesurfer作为节点模块。 Wavesurfer.js似乎运行良好，但是react-wavesurfer似乎遇到了我发现难以调试的问题。以下代码：

I have run into a roadblock on my web project that uses Wavesurfer. I have installed wavesurfer.js and react-wavesurfer as node modules in my project. Wavesurfer.js seems to be working fine, but react-wavesurfer seems to be encountering issues that I am finding difficult to debug. The following code:

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不是函数。我正在使用browserify捆绑我的javascript依赖项。

Produces only the first waveform from the call to this.makeWave(). It returns an error when trying to create the React waveform: Uncaught TypeError: this._wavesurfer.init is not a function. I am using browserify to bundle my javascript dependencies.

任何帮助将不胜感激！

推荐答案

如果仍然遇到问题，则可以创建自己的Waveform组件，该组件本质上可以处理相同的负载。这是一个对我有用的简单示例

If you are still having trouble with this, you can create your own Waveform component that essentially handles the same load. Here is a simple example that worked for me

1。手动安装waveurfer.js：

# taken from here: https://wavesurfer-js.org/
npm install --save wavesurfer.js@2.0.0-beta01

2 。构建自定义的Waveform组件：

// 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>
}

这篇关于Wavesurfer.js工作正常，但是react-wavesurfer有问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！