Turn Your Browser Into the Wheels of Steel

Now you can join the ranks of Grandmaster Flash and spin records on your own set of (virtual) turntables, courtesy of developer Scott Schiller. Schiller recently launched wheelsofsteel.net, which is just what it sounds like: a set of virtual Technics SL-1200s that allow you to mix and scratch to your heart’s content. What’s truly awesome about this — besides, you know, the basic concept of web-based turntables — is that Schiller built the site using HTML/CSS/JavaScript for the bulk of it.

I have been interested in the idea of building a turntable-based UI in HTML for years; however, the past presented a number of technical hurdles. Setting dreams of browser-based remixing aside, simply recreating the core design elements of a turntable was practically infeasible until the advent of CSS3. The features most notably missing from browsers involved drawing circles, rotation of elements and low-level control of audio. As of 2011, it’s a pleasure to say that these features can be implemented almost entirely using HTML, CSS and JavaScript alone.

Schiller has written a very extensive article that provides all sorts of background and technical info on the site’s development (e.g., development of the site began on January 31, 2011 and has taken approximately four months). It’s clearly not intended for “real” DJs — as Schiller notes, “what DJ really wants to scratch records with a mouse, anyway” — and using it comes with all kinds of caveats, but it’s still an awesome idea and the execution is incredibly impressive (watch a video of it in action).

While Flash was used for portions of the site — primarily to provide audio support — a site like this just continues to prove that “native” web technologies, though still in the early stages in some cases, are more than capable of creating truly immersive and engaging web experiences. (Another example would be The Man in Blue’s HTML5/CSS3-based “Definitive Daft Punk” visualization.)