![]() That’s it for the implementation - time to style! Let’s begin with adding some options into WaveSurfer.create to get the waveform looking better. Since the audio file in this example doesnt have much dynamic range, setting barWidth: 2 and. This is a safety net in case the button’s onClick gets called with () before isPlaying() is defined. yarn add wavesurfer.js styled-components react-icons. Note that we added an initial value of isPlaying: () => false to waveSurferRef. I have yet to discover an easier/more performant implementation that can rely on Wavesurfer as the single source of truth and lift any necessary state up. Simply set the backend option to MediaElement and pass the media element as the first argument to wavesurfer.load(). Adds ability to display and interact with. What I want: Allow user to drag-select a region and play it once (or possibly as a loop) when clicked (or when a button is pressed). Thanks to the everyting-is-public API, its easy to write wavesurfer.js plugins. This approach lets us rely on React’s diffing and rerendering to update the DOM outside of the Wavesurfer instance, in the case of the play/pause button. I know very little about JavaScript - I'm working from examples that I have found, trying to adapt them to my needs. There is a downside with this implementation: we must duplicate Wavesurfer’s own isPlaying() state into React with toggleIsPlaying(()), creating potentially two sources of truth with React’s state and Wavesurfer’s state.
0 Comments
Leave a Reply. |