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

Gepostet vor 6 Jahren, 2 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)

Beyond Cyberpunk Hypercard-Archive

HyperCard war eine frühe Version (vor HTML) der Hypertext-Programmierung auf dem Mac. Die Software war damals relativ weit verbreitet, wurde…

Monospaced Programming Fonts with Ligatures

Didn't know these exist, love it: Monospaced Programming Fonts with Ligatures. Three of the most interesting and thoughtful monospaced programming…

Stereographic Torus Knot

I'm not sure what's going on here but I like it: „This is very similar to Rise Up, though with…

Very Bad Volume Control Interfaces

Vor einer Woche postete Redditor Jacobone dieses Interface für Lautstärkeregelung von irgendeiner Win-App. Then this happened: r/ProgrammerHumor/search?q=volume&restrict_sr=on. Because ofcourse it…

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,…