The Wheels Of Steel: DJ-Decks in HTML, CSS and JavaScript

Scott Schiller hat ein DJ-Deck inklusive Scratch-Mode und Mischpult in HTML, CSS und JavaScript gebaut. Ist für ernsthaftes Mixing natürlich nicht zu gebrauchen und der Scratch-Mode erzeugt lustige Artefakte, dennoch: Impressive. Most 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 <input type="range"> 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.

The Wheels Of Steel: An Ode To Turntables (in HTML) (via Waxy)