Notes on Soundslice

Written by Adrian Holovaty on November 26, 2012

Last week, I launched Soundslice. The about page has the scoop, but here's a separate post with some personal details.

What is Soundslice? At face value, it's a site that syncs guitar tablature with YouTube videos. Beyond face value, it's a site that lets you annotate sound.

As somebody who's never learned to read music, I rely on "tabs" for learning new songs and preserving my own learnings when transcribing music. The problem with tabs, though, is that while they're awesome for notating what strings/frets to play on a guitar, they're horrible for notating subtleties of music, such as how long to hold a note, or phrasing, or really anything beyond the physicality of "put your finger on the fifth fret, second string." I'd spend hours transcribing a guitar solo, then I'd preserve my learnings in guitar tab, only to come back to it a few days later completely befuddled and needing to listen to the original recording again.

They're also horrible because they're generally ASCII text files (example). C'mon, people, it's 2012. There are apps and sites that "play" tab as MIDI, but I've never found those compelling. Learning guitar from MIDI is great, if you want your playing to sound robotic.

Several years ago, I realized I wanted a tool that let me combine tabs with an actual audio recording. This would give me the best of both worlds: the specific instructions in a tab, plus the crucial element of being able to listen to the original musician play it. (As somebody from the rock/pop and jazz worlds, I believe in learning by listening, instead of rote learning from sheet music.)

I started building this tool in late 2009, at night and on weekends, off and on (mostly off). The original version was a Flash application that let you upload MP3s and gave you an interface to annotate them; I learned Actionscript to do it, and I would joke with friends that I would be the last person in the history of mankind to start learning Flash. (This was around the time of the Steve Jobs Flash memo.) Why Flash? Because I wanted to build an audio app in the browser, and Flash was the only realistic solution at the time.

I had a pretty cool site working by summer 2010, with some musician friends using it, but it had some big problems: Flash was dying, for one, and there were major copyright issues with the fact that people could upload and share arbitrary MP3s.

I started building an HTML5 version to address the Flash issue, but I quickly ran into issues with non-standard Web audio specs. (Since then, the Web Audio API has caught steam, although it'll be a while before it's supported enough to be considered mainstream.)

That's when I got the idea to orient the whole thing around YouTube -- and, more broadly, player APIs -- instead of audio files. This avoided the copyright issue of allowing people to upload and share arbitrary files, it offloaded the playing-music-in-a-browser technology to YouTube, and it nicely fit the trend of amateur musicians learning from YouTube videos.

So I rewrote the whole thing again in JavaScript / HTML5, using the YouTube JavaScript API, and although I had to leave behind some features of the old app (arbitrary slowdown speed, waveform display, "perfectly" tight looping), it immediately felt right.

I asked my friend (and EveryBlock colleague) PJ Macklin if he wanted to design it, and he immediately pitched in, in his spare time, to make it look and act beautifully. This guy is really good.

Some more random notes...

Beyond face value, Soundslice is a way of annotating sound. At the moment, it only works on YouTube videos, and the marketing copy focuses on guitar tabs. But really, it's a general-purpose audio/video annotator. (See my annotation of DjangoCon lightning talks, for example.) I decided to focus on guitar tabs because it was much more easily understood -- but I hope people use it for much more than that, inventing uses I never would have thought of.

Everybody's noticed how shiny and polished Soundslice is, even in its first version. That's deliberate. I like the Lean Startup concept of the Minimum Viable Product, but for something like Soundslice, the minimum viable product needs to be really well-done. I'd say 80% of the positive feedback we've gotten is directly related to the fact that it's so polished. If it were a half-baked product with a lousy UI, people just wouldn't have liked it as much. For some class of product, my dear Lean Startuppers, good design and polish in your first version matters.

This is the most app-like thing I've ever made, with tons of keyboard shortcuts, UI/UX details and very little traditional page-by-page Web navigation. It's been a ton of fun to work on something completely different from what I've traditionally built.

Is Soundslice a startup or a side project? I incorporated it a while ago, so it's definitely a company -- but, until just after launch, I didn't have a good answer to the more philosophical version of that question. My main concern was that it was too niche to be a sustainable business. But after seeing the near-unanimous positive feedback, I am 100% convinced it's a worthwhile product and nice market. There are a bunch of opportunities for "Pro" accounts and partnering with content providers, for example. And if you know anybody who runs a music-education site, please put me in touch: I want to talk to them about licensing the technology.

When we launched the other day (on Nov. 15), I nearly cried. The feedback we've gotten has been the best, most positive feedback I've ever gotten on any product I've ever built, in 14 years of doing Web stuff. People love this thing. And I'd been working on it for so long that it had risked becoming my joke project -- the one that you work on forever but never actually launch. Seeing people's reactions made me emotional.

Thank you to everybody who's checked it out, created an account, annotated videos and spread the word. This is just the beginning. We've been fixing things and adding new features every single day since launch, with no sign of stopping. Follow us on Twitter, and please help spread the word. More awesomeness is on the way!

Comments

Posted by Nicola Larosa on November 27, 2012, at 10:20 a.m.:

You bet we love it! For one, I'm totally speechless. You just made not only my day, but at least my year too. :-)

I've been looking at scoring and tablature programs for ages, and always felt something was missing: now I know what it was. :-)

There's one thing I'd really like to see, before I pour my heart and Copious Free Time into this: an export feature. As bad as ASCII tabs are, I need a way to get all that work out of the system, or I won't feel enough at ease to devote substantial effort to it.

Again, thanks huge heaps, you're da man once again! Greetings from your humble Django Italian translator and once Rome tourist guide. :-)

Posted by Andrew Klein on November 27, 2012, at 8:34 p.m.:

Your description of the history of Soundslice would make a great presentation. You would be able to lead your audience through the original motivation for Soundslice and its initial design. You could show how the design responded to changes in technology (Flash out, HTML5 in) and in the over-all web ecosystem (capitalizing on YouTube and its JavaScript API). You could describe Lean Startups, and then discuss how, in this space, the minimum viable product had to be a polished minimum viable product. And you could take another step back and talk about Soundslice as a product and as a company.

Posted by Pat Hall on February 21, 2013, at 8:43 p.m.:

Hi Adrian,

I really liked your talk from 37signals on this app. I am a linguist and I think about very similar problems in doing textual transcription. So it was interesting to see how you solved your problems (I was surprised to see so much canvas going on; I have been thinking in terms of SVG, but I suppose that’s in large part because I’m dealing with text and not syncing a bunch of visual elements.)

You mention rendering sound waves, you might be interested in this:

https://github.com/plucked/html5-audio-editor

There’s a demo at:

http://plucked.de/

I look forward to the day that Mozilla finally gets the Web Audio API working.

And thanks for Soundslice too. I play guitar and my girlfriend is a ukulele player and will thank you for the 4-string option. :]

Comments have been turned off for this page.