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

Gepostet vor 5 Jahren, 11 Monaten in #Misc #Coding #DJing #HTML5 #Turntables #Webdesign

Share: Twitter Facebook Mail

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)

Zalgo Droplet

A Javascript-Droplet „to invoke the hive-mind representing chaos. Invoking the feeling of chaos. With out order. The Nezperdian hive-mind of…

Soulwax - Essential Mix 2017-05-20 (incl. 14 new Tracks)

Download hier, Tracklist von dort, da auf Mixcloud. Die erste Stunde besteht aus 14 neuen Soulwax-Tracks, der Rest ist eine…

Heiko MSO – R.I.P.

Der frankfurter House-DJ und Techno-Urgestein Heiko MSO ist gestorben. Wenn ich mich richtig erinnere, war es damals Richie „Plasticman“ Hawtins…

C64-Demo generates itself from Soundtrack

Gewinnerdemo der Revision 2017 von Linus Akesson, ein C64-Hack in 256 Bytes: A Mind is born. Ich verstehe ja noch…

Binary Keyboard

Nette Spielerei von Chris Johnston: „A two-button backlit mechanical keyboard that types ASCII values, one bit at a time.“ (via…

Digital-Uhr in Conways Game of Life

Großartig: Eine Digital-Uhr in John Horton Conways zweidimensionalen zellulären Automaten: Get the design from this gist. Copy the whole file…

A Banana Keytar and more from Stupid Hackathon: Inverted Eyetracker-Pong, Robot Porn Addict or the Shitty Sharpie Tattoo Gun)

Ein weiterer Fav vom Stupid Hackathon NYC 2017, die Banana-Keytar von Amanda Lange. Auch geil: der Twitter-Bot Robot Porn Addiction,…

Dwitter – Social-Network für JavaScript-Remixe

Dwitter, ein Social Network von Andreas Løve Selvik für visuelle Javascript-Experimente in 140 Zeichen mit eingebauter Remix-Option für jedes Code-Snippet.…

Finding Animal-Shapes in Noise

Michael Trott hat im Forum von Wolfram Alpha ein random Noise-Pic generiert, die Verdichtungen und Shapes im Noise isoliert, die…

The best Anagramm

Mark Dominus hat das beste Anagramm der englischen Sprache ausgerechnet. Dazu hat er die komplette Liste der Anagramme (der englischen…

./code--poetry

„This website displays a collection of twelve code poems, each written in the source code of a different programming language.…