Wavesurfer.js工作正常，但是react-wavesurfer有問題

Question

我在使用Wavesurfer的Web項目中遇到了一個障礙。 我已經在項目中安裝了waveurfer.js和react-wavesurfer作為節點模塊。 Wavesurfer.js似乎運行良好，但是react-wavesurfer似乎遇到了我發現難以調試的問題。 如下代碼：

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（）的調用中僅生成第一個波形。 嘗試創建反應波形時返回錯誤： Uncaught TypeError: this._wavesurfer.init is not a function 。 我正在使用browserify捆綁我的javascript依賴項。

任何幫助將非常感激！

Answer 1

如果仍然遇到問題，則可以創建自己的Waveform組件，該組件本質上可以處理相同的負載。 這是一個對我有用的簡單示例

1.手動安裝wavesurfer.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>
}

Answer 2

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 ）