Soundslice–Transcription in the Browser

Over the last few years I've been following with interest the progress of audio support in HTML 5. If you follow Chris Lowis' Web Audio Weekly you'll know that almost every week something amazing is being created. But in this post I want to highlight what I think is one of the most exciting HTML 5 audio applications around at the moment, and that's Soundslice.

What is it?

Soundslice is basically a web-based tool for learning to play guitar pieces, enabling you to listen to the piece while at the same time seeing the music notation. The notation can be provided both as standard musical notation, and in "TAB" format, which is much easier for guitarists to follow along with.

Syncing

How is this any better than simply playing an audio file while looking at a static page of sheet music? Well for one thing, the notation auto-scrolls while the song plays, but it goes a step further, highlighting the current note at any given time, which ensures you never get lost, or have to take your hands off your instrument to scroll further down. The synchronization is remarkably good, and is able to keep up with very fast flurries of notes.

Notation

The notation itself is beautifully presented, and you can choose to toggle on or off standard notation, tab notation and chord charts. It also has the ability to indicate all the various articulations you see on guitar such as bends, slides, harmonics, palm mutes and so on.

Looping

Of course, when you're learning a song on guitar, you'll want to go over and over a few bars at a time, and the Soundslice player really shines in this capacity. Simply drag to select the time portion you want, and the player will automatically loop that selection.

One thing I've been really impressed with is how seamless the looping is. I was expecting that there would be a brief gap in playback while it seeks back within the source file (or video), but all the transcriptions I've tried have looped flawlessly.

Playback Speed

The other key feature for learning a song is the ability to slow it down while you memorise the sequence of notes and the optimal fingering, and then speed it up slowly as you gain fluency. And the Soundslice player allows you to do this too, supporting speeds down to 25%. You can even speed it up if you want to give yourself a real challenge!

However, from a technical standpoint, providing varispeed control is a very difficult task, as you must maintain the original pitch in order for musicians to be able to still play along in the same key. Unfortunately, audio that has been adjusted for speed and pitch often contains stuttering sounding artefacts. And the Soundslice player is no different. I'm assuming all the processing is being done in the browser, and the pitch and speed changing algorithms on offer are fairly rudimentary.

But despite less than ideal sound quality at slower speeds, it's more than good enough for practising along to, and provides an incentive for you to get back up to 100% speed!

Community Transcriptions

Soundslice originally got started using YouTube videos as the source of audio, and allowing users to transcribe directly in the browser. So you can literally search for any video on YouTube and add your own transcription. They’ve done a great job of making transcription as easy as possible (although it’s still a fairly tedious process), and once you've transcribed a video, it is automatically shared with everyone else. The library already has a great selection of completed transcriptions, and there are more in progress.

A great example to get you started is this complete transcription of an awesome youtube video of someone playing 100 classic guitar riffs back to back.

With YouTube videos, you don't get full varispeed playback options, you must pick between full or half-speed. But just these two speeds are usually sufficient - you can memorise a difficult section at half-speed, and once your fingers have learned where they need to go next, it shouldn’t be too long before you can play the passage much faster. Half-speed is also handy when you're transcribing to get the note start positions exactly right.

Embedding

The great thing about this having been built with standard HTML 5 technologies is that they can make their player available to be embedded into other sites easily, and already a number of guitar sites are licensing their technology (you can see a list here). I fully expect to see that list grow over time, as what they offer is streets ahead of anything I've come across elsewhere.

They also have a store selling access to official transcriptions of guitar-based tracks. The selection is fairly limited at the moment, but I'm looking forward to seeing a much broader range of styles and artists on offer here.

Teaching

Another use they are putting the site to is allowing teachers to create their own lessons and grant their students access to those lessons. Again this is something with huge potential, and I think there could be an even bigger market to buy access to online guitar courses than there would be for the transcriptions currently in store.

Development

The coding brains behind the operation is Adrian Holovaty, also famous for creating the Django web framework. If you're interested in the technology behind Soundslice, then there is a fantastic video he created for 37 signals, where he talks through the tech stack, including the use of the HTML 5 canvas for the graphics, and explanations of the underlying architecture and synchronization techniques. It's very rare that you come across developers of commercial products so open about their codebase so kudos to him for sharing the knowledge.

Other Instruments

Although Soundslice is mainly focused on guitar, there is absolutely nothing about their technology that limits it to guitar. In fact, you can already find transcriptions of string quartets (where you can see all four parts simultaneously if you want, or just focus on one), and it could quite easily be adapted for teaching drums or piano as well.

At the request of my four year old daughter last year, I spent a while learning to play "Let it go" on the piano, using a YouTube video as a reference. But it was frustrating to constantly have to pause and reposition the video while I learned each section. Had I been able to use Soundslice it would have made things much easier, and I hope to see them expand more into keyboard based instruments in the future. (I'm also hoping they'll offer MIDI import as a way to speed up transcription).

Summary

In short, if you're a guitarist, you'll definitely want to check this out, and if you play another instrument, bookmark it and check back in six months. It's rare that I get quite so enthusiastic about a software product, but I really think that Soundslice has potential to revolutionise the way we learn to play individual songs.

What’s more, a few years ago I would have said that this was the sort of application that you couldn't create effectively in a browser, and should be a native application, so it serves as a demonstration of just how much is possible in the browser in this new era of HTML 5.