Using Soundcite's Inline Audio Tool for Digital Storytelling

Using Soundcite's Inline Audio Tool for Digital Storytelling

The Vox Creative team came out with an article entitled, "How Grey Poupon became hip-hop’s favorite condiment". They used an awesome tool to be able to highlight the lyrics in songs when the term Grey Poupon appears. In fact, they did more than that  — they built a full tool that sections it from year to year and calculates how many songs mention the term. 

I haven't figured it fully out but I was able to find soundcite, a project done by Knight Lab out of Northwestern University. It's awesome to see where this has been implemented especially in the realm of digital storytelling.

Now, I should have been reading the full article but I was having more fun trying to breakdown how the hell they did this. 

The Tools

The tool is  pretty simple. There's not a ton going on here but I'm not savvy enough to figure out the more comprehensive one that Vox built. The difficult part being the full year slider and song count they established


The default CSS for the soundcite tool does include linear gradients which helps the user follow along. It's a small thing but honestly makes the biggest difference when capturing the user's attention. The eye just seems to automatically gravitate to it and there is a small satisfaction when it is so spot-on. 


Besides the examples available via Knight Lab, there is a codepen user Kristina Karisch who used this tool to form english language content with a mix-in of foreign language voiceovers. That has the possibility of being a powerful digital storytelling tool — maybe a cool way to build an interactive language web page. You can view the example here. 

I wanted to do my own so I chose to do something from the Japanese Anime Gangsta. One of the main characters Nicolas is deaf but is still able to communicate — although rather loosely. I love the voice-acting in it since it mixes in that gangster Japanese and this completely unique voice. 

Check it out below but I'd turn your volume down just a little bit.  Also, just imagine this guy saying it. 

あああああ。。。what a pain. Sure, we may be indebted to you all. Chad, but we ain’t under your command. I don’t want you getting the wrong idea. Got it? “One must first give to take”.

See the Pen Soundcite - Gangsta Nicolas Voiceover by Parker Tinsley (@parkerti) on CodePen.


What can it be used for?

This is such a powerful digital storytelling tool. Not only does it intentionally slows the reading pace but it also provides a unique way of utilizing audio. It's not hijacking anything from the user — it's completely voluntary if they want to listen. So it doesn't disrupt the reader but their experience will be heightened due to the personal touch it brings.

Personally, I'd love to see this implemented for a beginner language page.   

WEBGL Background Scroll Spirals

WEBGL Background Scroll Spirals