![]() Set the waveSurfer object after the first render, this way the will be mounted to the DOM before you create the waveSurfer object. My solution above uses the former with a detailed explanation below. let wavesurfer window 'WaveSurfer' The WaveSurfer plugin recently started supporting ES6 and think this is a cleaner integration but since I am new to Ionic/Angular I am having problems getting this to work as well. To solve this you need to either set the waveform to state, so it is always instantiated, or add the playing variable inside the so useEffect will re-instantiate the waveform each time the component re-renders. Since your useEffect runs only on the first render, once the state changes your waveform will be set to null and useEffect will not re-instantiate it when the component re-renders. I understand that ReactNative is a framework and does not expose the DOM so Im wondering is there a way of wrapping the wavesurfer.js code to make it work with ReactNative or do I have to change the wavesurfer.js code itself, and if so, how The salient parts of my App. We’ll add an mp3 file to the project as the audio source to pass into our waveform component. Your ayPause() fails after clicking the play button because you are updating state, playing, which will cause your component to re-render. Wavesurfer.js for the waveform React Hooks for the implementation This article assumes that you’re familiar with React, but feel free to check out the respective docs linked above for a refresher. Import * as WaveSurfer from 'wavesurfer.js' ![]() I have the following functional React component that is using wavesurfer.js import * as React from "react"
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |