Front Range Front-End Meetup: Let's Do the Wave(form)

This week we're excited hear from Ken Hoff: a full-stack product engineer, currently building personalized and scalable activity feeds at GetStream.io. (More about him at ken.hoff.tech)

Let's do the Wave(form) - Generating frontend audio visualizations with HTML, CSS, and JavaScript

At GetStream.io, we're currently building Winds 2.0, an RSS reader and podcast listening app. We needed to build a highly-stylized "waveform" component - a visualization of how loud or soft the audio is at every point in the audio file. It's a wonderful little mashup of all the main frontend technologies - HTML to generate SVGs, CSS for masks and easy styling, and JavaScript for loading/processing the audio using the Web Audio API.