Wavesurfer.js is working fine, but react-wavesurfer has issues

Question

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

Answer 1

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. install wavesurfer.js manually:

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

2. build a custom Waveform component:

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

        

      
    )
  }
}

Waveform.defaultProps = {
  src: ""
}

3. and then, in the parent component:

// components/my-parent-component.js
import Waveform from 'path/to/components/Waveform'
...
render() {
  return 

}