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;

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.

Any help would be much appreciated!

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;

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.

Any help would be much appreciated!

• javascript
• reactjs
• browserify
• wavesurfer.js

• I'm having the same issue! i opened a specific issue on the project here: github./mspae/react-wavesurfer/issues/60 – avocadojesus Commented Aug 12, 2017 at 18:35
• I am trying to use react-wavesurfer. I am not able to import it. Have u changed config files ? – EdG Commented Jan 3, 2019 at 10:16

2 Answers 2

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

1. install wavesurfer.js manually:

# taken from here: https://wavesurfer-js/
npm install --save [email protected]

2. build a custom Waveform ponent:

// ponents/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 = {

    }
  }
  ponentDidMount() {
    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)
  }
  ponentWillUnmount() {

  }
  render() {
    return (
      <div className='waveform'>
        <div className='wave'></div>
      </div>
    )
  }
}

Waveform.defaultProps = {
  src: ""
}

3. and then, in the parent ponent:

// ponents/my-parent-ponent.js
import Waveform from 'path/to/ponents/Waveform'
...
render() {
  return <div clasName='parent-ponent'><Waveform src={'/path/to/audio/src.mp3'} /></div>
}

React-wavesurfer handles the creation of the wavesurfer instance itself. So you can leave out the makeWave part.

import React, { Component } from 'react';
import WaveSurfer from 'react-wavesurfer';

export default class WaveComponent extends Component {
  render() {
    return (
      <WaveSurfer audioFile="/path/to/audio.mp3" />
    );
  }
}

This code works for me. If this doesn't work please post the exact versions of wavesurfer.js and react-wavesurfer you are using.

Also please bear in mind that you need to expose wavesurfer.js as a global variable if you are using a module bundler. (This will hopefully be no longer necessary in the near future) – for more exact instructions please see https://github./mspae/react-wavesurfer#prerequisites-and-mon-pitfalls)