Wheels Of Steel: The HTML Turntable

Published by Stickboy on June 18th, 2011

HTML Turntable

In 2010, Panasonic announced that it was ceasing production of the world-famous Technics 1200 series turntable.

A sad day in the history of music. However one guy has taken it upon himself to create an HTML version of the world famous 1′s and 2′s. Codenamed The Wheels Of Steel: An Ode To Turntables this is a brilliant undertaking and the results are impressive.

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.

While some will mistakenly assume this prototype is “made using HTML5″, it is a technically inaccurate label. The design is largely thanks to CSS3 and while a few HTML5 elements are used by the prototype, none of them are visible in the UI. The mixer uses some hidden
elements for tracking the values of the crossfader, upfader and rotary knobs behind the scenes; the same approach applies to the pitch slider on the turntables. In the event Flash is not present, HTML5 Audio() may be used by SoundManager 2 for playback of MP3s. Aside from these two elements, the markup is run-of-the-mill (and hopefully, somewhat-semantic) HTML4.

Here’s a quick example showing pitch bending and 33/45 RPM control. UI is HTML, CSS and JavaScript; audio is being handled by Flash.

Mixing and scratching…


video vault

cool clicks

follow the SB Network on facebook