Wavesurfer.js工作正常,但反应浪漫有问题

时间:2017-06-28 22:34:12

标签: javascript reactjs browserify wavesurfer.js

我在使用Wavesurfer的网络项目上遇到了障碍。我在我的项目中安装了wavesurfer.js和react-wavesurfer作为节点模块。 Wavesurfer.js似乎工作正常,但反应波浪似乎遇到了我发现难以调试的问题。以下代码:

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 is not a function。我使用browserify来捆绑我的javascript依赖项。

非常感谢任何帮助!

2 个答案:

答案 0 :(得分:8)

如果您仍然遇到此问题,可以创建自己的Waveform组件,该组件基本上处理相同的负载。这是一个适合我的简单示例

<强> 1。手动安装wavesurfer.js:

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

<强> 2。构建自定义波形组件:

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

答案 1 :(得分:0)

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