What are the features like? 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. Right-click or shift + click for the right turntable. Click and drag the needle to seek while the record is playing. If you're one of the "cool kids", you will see "scratch mode" which gives you more realistic DJ features like the demo video.

Tips & Tricks

(Note that scratch and pitch bending are only available in "scratch mode".)

Scratching and precisionOnce 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.

Record backspinGrab 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.

Pausing the recordIf 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.

Cue point "drum machine"While on the left deck, use the number keys 1 through 5 to set cue points (shown as pieces of tape on the record) on bass drums, snares, hi-hats as they happen (look at the waveforms for timing) - and then press those keys again to play those sounds. You can cut, mix and match samples to make your own sequences or drum beats. Combine with brake effects, backspins etc. for even more fun. To over-write an existing cue point, use shift + 1. You can also set cue points when the power is off.

Power scratch / beat juggling effectsCheat real-world turntable physics by setting a cue point (eg. 1) on a bass drum sound, then scratching over that sound; let the beat run for a bar or two, then hit 1 and click + drag to seamlessly scratch from the beginning of the loop as though you were beat juggling two copies of the same record.

Power brake mixWhen a snare or bass drum plays, press < to stop the left deck's motor and produce an electronic brake sound effect; combine this with ← to cut the cross-fader to the left deck to play just this sound, then hit ↓ or → to bring the other turntable back into the mix for the next beat. Using shift + ↓ turns the power off, letting the motor spin down - a longer-running sound than stopping the motor.

Quick pitch bendingTo match the other record, grab the pitch slider and drastically change the record speed (e.g., if behind, speed it up +6%); as it nears being in sync, bring it back towards the matching speed (e.g., +1%.)

This prototype won't work for everyone - in fact, it's presently best with Safari 5 or Chrome 12 on OS X. If your browser supports "accelerated rendering" or similar GPU-based layout, you should be able to run "scratch mode" which includes pitch bending, scratching and EQ effects.

Audio latency (lag) will vary depending on your operating system and browser, with advance apologies to Windows users who may get 300+ milliseconds. Sorry, it's apparently an OS-level issue. If your browser can't render nice framerates, audio will be intolerable in scratch mode; you'll get an option to fall back to basic non-scratch mode, which will at least have normal-sounding audio playback.

FAQ-type things

This thing looks broken in my browser. Is there a bug?

This is an experimental demo, rough around the edges, and things may break badly in some browsers. Firefox 4, Safari 5 and Chrome 12 on WinXP + OS X were the primary browsers used and tested during development. (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. Can this be made faster?

Modern hardware and software is really needed for this demo to perform well. For the best performance, your browser should support hardware acceleration (which depends on your 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. What's up?

There is a direct correlation between audio quality and the developer's math skills, when it comes to scratching and EQ effects. Sorry about that. ;)

Note that if you are in scratch mode, the remote site must also have a special Flash crossdomain.xml file for playback to work.

Can I load arbitrary SoundCloud tracks?

If you know your party's extension (and by that I mean the "track ID"), you can load it using the same text box for internet URLs. The format is sc-# where # is the track ID. Only tracks that allow streaming will play.

Does this work on the iPhone, iPad, or another "special snowflake"-type device?

The UI renders OK, but you can't do much with it.

iOS doesn't do flash and doesn't (currently?) support remixing of audio via JavaScript, but HTML5 audio will be used if supported. iOS 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.

Will this work without Flash?

If Flash isn't present, HTML5 audio will be attempted. This will also mean "scratch mode" (including pitch bending and EQ effects) will not be supported and you will be subject to HTML5 audio's quirks, not to mention bugs in my own code in this case.

Can I DJ a house party with this?

In theory, yes. 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. I recommend Safari 5 and a MacBook Pro if you go for it. If you actually pull it off, POIDH! (Pictures Or It Didn't Happen.) Flickr tag: wheelsofsteeldotnet? ;)

On this note, split-channel mixing is on the to-do list. This way, you can cue music on your headphones (say, on the left channel) while your party is hearing the "live mix" only the right channel.

Aboot

This is a side project by Scott Schiller, a Canadian who works at Yahoo! on Flickr and enjoys mixing photography, sound and code together to make shiny things. He occasionally shares things as @schill on Twitter, and appreciates nice feedback.

History + 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.

Is this "HTML5?"

There are few HTML5 elements in the markup - it's mostly CSS3 at work if anything; the mixer and turntable pitch sliders are 100% CSS, for example. The audio scratch, pitch and EQ effects are handled by Flash. HTML5 audio can be used if flash is not present, but functionality is reduced (i.e., no scratch mode.)

What was the point of all of this, again?

I've wanted to build some sort of browser-based turntable interface for years, but it wasn't really practical until CSS3 came along (making circles and rotation possible) and flash 10, which added support for dynamic audio manipulation. JavaScript APIs for low-level audio are also out there, so it may be possible do this entirely flash-free.

...Why!?

I say, "Why not?" The fun of this (and most previous JavaScript experiments) was starting with a simple idea, while planning a grand scheme - and the challenge of actually determining if the latter was even possible. 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. If you try it out, I hope it works OK! :)

I'm not satisfied. I want to read, like, 8,000 more words about how this works. And I want pictures. And video.