Audio Annotation POC Using WaveSurfer.JS

See the Pen wave surfer – waveform by Tom (@twwoodward) on CodePen.

I needed to make a quick proof of concept for the annotation of audio on the web. In this case, it’s meant to provide a visual and auditory way to play through interview segments that represent different categories of responses. I found WaveSurfer.js this morning and just a bit later I had a functional example. I find the ability to highlight track elements visually and access specific segments to be a pretty powerful combination.

If we stacked several tracks vertically the visuals would quickly point out content variation in terms of timing and total composition. You could get more and more complex from there.

Playing with it gave me all sorts of ideas (including possibly using it as part of of the upcoming Reclaim Your Dance Party // API + Audio = (beats, visuals, internet, participate) session at Domains 17 with Grant and Brian).

It’s also looking like I’ll be able to work more with our music department to think through online course on music so possibilities like this will be very useful.

This kind of thing would be pretty easy to turn into a plugin . . .

Comments on this post

  1. aarondavis1 said on April 29, 2017 at 4:17 am

    So Tom, does that allow the same functionality as Soundcloud, without using Soundcloud?

  2. Tom Woodward said on April 29, 2017 at 11:16 am

    Could certainly set it up to do comments like soundcloud does at points in the timeline. There may be other things soundcloud allows that I’m ignorant of. I like it for author level annotation . . . I need to build an interactive piece with poetry or a real transcript to show what I’m thinking.