See a quick demo video of cueing, pitch bending and beat matching using scratch mode. The basics: Controls Left-click a track to load it on the left turntable. Click and drag the needle to seek while the record is playing. Note that scratch and pitch bending are only available in “scratch mode”. Once you grab the record, the mouse can move anywhere within the screen without losing position. The closer to the outside of the record, the smoother the mouse movement and scratching effects are. Grab the record with the mouse and throw it forward or backward for a spin effect. During a backspin, the record will take slightly longer to catch up when it is near zero-velocity. Combine backspin with cue points as a fun way to loop beats. If you click and release without moving the mouse, the record will simply pause. This is handy when you want to briefly delay the record without losing tempo. Super-fast clicks can substitute for pitch bending in some cases.
You can cut, mix and match samples to make your own sequences or drum beats. Combine with brake effects, backspins etc. This prototype won’t work for everyone – in fact, it’s presently best with Safari 5 or Chrome 12 on OS X. Sorry, it’s apparently an OS-level issue. IE 9 and a preview of 10 were tested briefly. Your mileage may vary with others. The turntables are slow and my CPU maxes out, that’s not very fun. Modern hardware and software is really needed for this demo to perform well. OS and graphics driver support, also. The demo runs OK on my 2008-era Mac Mini with Safari, but is notably smoother on a new Macbook Pro.
Regardless of your setup, if you get stuttering audio it may help to close other tabs and graphics-heavy applications while trying out the demo. Scratching sounds kinda glitchy and low-quality. There is a direct correlation between audio quality and the developer’s math skills, when it comes to scratching and EQ effects. Can I load MP3s from the internet? Note that if you are in scratch mode, the remote site must also have a special Flash crossdomain. Only tracks that allow streaming will play. The UI renders OK, but you can’t do much with it. OS only allows playing of one sound at a time via JS, however, so you can’t mix songs. That said, you can still pinch-zoom in, load and play a record on the left turntable. If Flash isn’t present, HTML5 audio will be attempted.
HTML5 audio’s quirks, not to mention bugs in my own code in this case. Can I DJ a house party with this? It might be a bit sketchy, but fun for informal events. If a friend or someone online writes in in saying it worked, I’d consider this fun experiment to be a success. If you actually pull it off, POIDH! On this note, split-channel mixing is on the to-do list. This is a side project by Scott Schiller, a Canadian who works at Yahoo! Flickr and enjoys mixing photography, sound and code together to make shiny things.
The source code is also available on Github. Tech Details This thing started in February 2011 as a small CSS experiment, and over 12 weeks between evenings and weekends, evolved to cover most of the capabilities of a dual-turntable and mixer console. The audio scratch, pitch and EQ effects are handled by Flash. What was the point of all of this, again? 10, which added support for dynamic audio manipulation. While there are some notable bugs and limitations, this idea has run a lot further than I ever expected and it was a ton of fun to build. I want to read, like, 8,000 more words about how this works. Graphic illustrator Kyle Kesterson from Giant Thinkwell, who provided awesome renderings of the turntable body. Patrick Hoesly on Flickr, who published the CC-licensed pattern used for the background: “334: Sunrise Alpha Texture.