react-wavesurfer
react-wavesurfer copied to clipboard
this._wavesurfer.init is not a function
I attempted to follow the README, and have tried both using npm to install and import the beta version of wavesurfer, as well as simply requiring the cdn-hosted wavesurferjs file into my main project. Either way i continue to get the same error. Not sure what i'm doing wrong here, but it seems others are having the same issue
https://stackoverflow.com/questions/44813585/wavesurfer-js-is-working-fine-but-react-wavesurfer-has-issues
any idea what i'm doing wrong here?
attempt 1:
import WavesurferComponent from 'react-wavesurfer'
...
render() {
<WavesurferComponent audioFile={'/audio/default.mp3'} />
}
attempt 2:
// index.ejs
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>
render() {
<WavesurferComponent audioFile={'/audio/default.mp3'} />
}
I've answered that question https://stackoverflow.com/a/45662173/5097199
If you are getting this._wavesurfer.init is not a function
then this is because the global WaveSurfer
variable cannot be found. You need to adjust your build configuration so it is exposed: https://github.com/mspae/react-wavesurfer#prerequisites-and-common-pitfalls
The beta/v2/es6 version of wavesurfer.js was actually originally architected to solve this problem (beforehand wavesurfer.js was built in such a way that it was not possible to use it in a truly modular way) – as yet there is no updated react-wavesurfer version available which works with the beta wavesurfer.js
Is there a way to use wavesurfer without touching the webpack config? I'm using 'create-react-app' and I didn't eject.
Yea I'm in the same boat. I'm also using create-react-app and cant get that webpack.config code working
ok so this worked for me. https://jaketrent.com/post/change-webpack-config-create-react-app-without-ejecting/
I ended up wrapping WaveSurfer.js myself, with a single react file. It's much better, because the new version of wavesurfer allows easier interfacing, without touching the webpack config or using work-around libraries at all!
If you want I can upload my solution as a gist or as a module :)
@danielkrich Could you please share your solution? Thanks
Try yarn add [email protected]
I have the same problem https://stackoverflow.com/questions/44813585/wavesurfer-js-is-working-fine-but-react-wavesurfer-has-issues it causes typeError: this._wavesurfer.init is not a function @danielkrich Can you please share the solution you made?
@danielkrich any chance of having a look at that wrapper please?
To all:
Note: This version does not work for the version 2 (beta) of wavesurfer.js – A version of react-wavesurfer that will work with the new version is in the making.
Thus, please use wavesurfer.js v1.4.0
instead of v2.x.x
@18932508 @sokratisvs @barbaragomes Here you go, sorry for the extreme delay: https://gist.github.com/danielkrich/8fc02a79caeff5de9d6554f003516eae
You will need to import recompose which is just awesome. Usage should be the same as react-wavesurfer. Hope you'll get the hang of it :)