Wavething: Audio Waveforms


The app is live here! Try it out with your own audio file.

Wavething is a simple app for creating and styling audio waveforms. Audio waveform charts display the volume of an audio file over time. When the wave is taller, the audio is louder.

Wavething Screenshot

This project was an experiment to see how well React and D3 work together. Amelia Wattenberger’s post about this topic was a great resource. I took the lazy approach and cleared the SVG element in the useEffect hook on each data update. A better way to do this would be to let D3 control data entry/exit/updates instead of recreating the chart from scratch on each update.

Tech

  • React
  • D3.js
  • waveform-data.js