pitch adj.
  • -8
  • -
  • 6
  • -
  • 4
  • -
  • 2
  • -
  • -
  • 2
  • -
  • 4
  • -
  • 6
  • -
  • +8
on / off start · stop 33rpm 45rpm
pitch adj.
  • -8
  • -
  • 6
  • -
  • 4
  • -
  • 2
  • -
  • -
  • 2
  • -
  • 4
  • -
  • 6
  • -
  • +8
on / off start · stop 33rpm 45rpm
t f
Spinning up The Wheels Of Steel...

Enjoy the podcast « Click the mix below and press start on the turntables. Right click for play the podcast on the second turntable! Use the mix and have fun! IF THE AUDIO IS BAD, PLEASE CLICK HERE!!!. UPGRADE THE VERSION, PLEASE CLICK HERE!!!

Welcome to The Wheels Of Steel: Turntables in your browser
(a Web-based DJ prototype)

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.

  • - Crossfader
  • [ ] - Pseudo-transform (cross-fader cut / override)
  • 1...5 / 6...0: Cue points for left / right deck while playing. First keypress = set cue point, second = recall.
    shift+1 = set/update existing point #1, ctrl+1 = delete.
  • - / +: "Nudge" pitch, adjust speed. Use shift for right turntable. (Scratch mode only.)
  • < / >: Start/stop button. +shift to use power dial.
  • d: Debug (outline) mode.
  • double-click a slider or rotary knob to reset it.

Tips & Tricks

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

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

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

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

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 effects
Cheat 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 mix
When 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 bending
To 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%.)

Bonus URL parameters

CITACI RECORDINGS

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.

This project uses SoundManager 2 and other F/OSS-type libraries. The source code is also available on Github.

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.

If you're certain, see The Wheels Of Steel: An Ode To Turntables (in HTML) for all of that.

Credits and Thank-Yous

In no particular order, thanks go out to the following:

  • 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."
  • Vancouver-based hip-hop artist SonReal, who granted permission to include some of his music in this demo.
  • Kutiman and numerous YouTube users for participating in the Thru-You project (which I was coincidentally sampled in), a wonderful mix of web-sourced music.
  • PRGuitarman for making the Nyan Cat .GIF (used here as "album art", with permission!)
  • Kelvin Luck and Andre Michelle, for research and code examples regarding pitch bending in AS3/Flash 10.
  • Leo Bergman and Kevin Lamping for their work on porting EQ/filter code from C into ActionScript 3.
  • Andrew Freiday, for publishing PHP scripts that can read and generate waveforms from MP3 files.
  • Phil Parsons for the API-Cache PHP class used here to optimize SoundCloud API calls.
  • SoundCloud, for their API which delivers fresh demo music (and the Beastie Boys' latest album) for users to play on these virtual turntables.
  • Friends, family and co-workers who patiently listened to my blabbering about this for several months, proof-read my writing and offered helpful feedback on earlier versions of the prototype.
  • Old-skool DJs who still keep it real and carry around tons of records, none of that laptop stuff! ;)