Basically, we’re just turning a JS ArrayBuffer into a Float32Array: In order for us to grab that data and process it, we’ll need to load it into an AudioContext, then use the getChannelData method to grab the array of audio values. Keep in mind that digital audio files are literally just huge arrays of numbers that, when played in sequence quickly enough, sound like a podcast! Or dark incantations, if played in reverse. Part 1: Getting Waveform Dataīefore we can render a waveform, we have to take the audio data and convert it into a format that we can actually use to put on a page. It’s also important to note that we also need to display the progress on the waveform, so the user knows how many glorious minutes of sultry radio announcer voice they have left before another pledge drive break. All we need now is a waveform renderer - some kind of component that can take an audio file, and turn it into a waveform. Winds 2.0 already has a lightweight audio player, which is just a wrapper around react-audio-player. We’ve already built the audio player - we just need a waveform renderer.

Wavesurfer uses the HTML5 canvas (which wasn’t going to work for us - more on that later!), and it looked like we were going to have to work around a lot of issues integrating the old-school JS library into our new-school React/Redux/Electron app.

Wavesurfer is an awesome project, but didn’t quite satisfy our requirements. There is! react-wavesurfer is a React wrapper around wavesurfer.js, which is a JavaScript library for playing and displaying audio files in a browser.

Resize wavesurfer js