Wheels of Steel: A Virtual Turntable in Your Browser

A Virtual Turntable in Your Browser

Wheels of Steel is a virtual browser-based turntable emulator created by Scott Schiller, a Canadian developer who works on Flickr at Yahoo. This project will appeal to those who A) dig turntablism and B) are knowledgeable in web development. I know nothing of the latter, but from what I can tell, Wheels of Steel appears to be significant because unlike its predecessors, it employs CSS3 instead of flash. Since I'm not familiar with the topic, here's Scott on the history and technical details of the project:

"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.)

Wheels of Steel: A Virtual Turntable in Your Browser

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."

A brief overview of the "debug" (CSS layout) mode, record physics, loading, setting a cue point at the beginning of a track, mixing and beat-matching a second track in and cutting it out with the cross-fader.

If you're interested in playing around, first read Scott's fascinating, in depth article on how he developed it, and then go ahead and give it a spin. Be patient—there's plenty of background info and useful tips for first time users, but comments off-site indicate that the controls require some getting used to.

*Note, the prototype is currently best supported in Safari 5 or Chrome 12, OS X.

Just updated your iPhone to iOS 18? You'll find a ton of hot new features for some of your most-used Apple apps. Dive in and see for yourself:

1 Comment

Cool stuff :)

Share Your Thoughts

  • Hot
  • Latest