![]() ![]() ![]() 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. This is a safety net in case the button’s onClick gets called with () before isPlaying() is defined. It creates wavesurfer instance and watches for changes in plugins list. Note that we added an initial value of isPlaying: () => false to waveSurferRef. WaveSurfer WaveForm Region WaveSurfer Core component of the package. We’ll add an mp3 file to the project as the audio source to pass into our waveform component. 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. 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. 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. 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. Links for wavesurfer Ubuntu Resources: Bug Reports Ubuntu Changelog Copyright File Download Source Package wavesurfer: wavesurfer1.8.8p4-3ubuntu1. ![]()
0 Comments
Leave a Reply. |