Simon White

Mad Handle

Animated vector illustration with built-in audio player/visualizer and animated ad banner for music artist.


Story

In the ancient times of 1998, music artist Mad Handle asked me to help them share their first album with the World Wide Web.

The interactive artwork symbolically depicts the record’s journey into the digital jukebox of the Internet as though it had traveled from a classic vinyl jukebox, through the looking glass of the computer screen, the physical grooves of the record transforming into digital audio waveforms. The vinyl single is digitally recycled for each new track. The record label is the band themselves. The transport mechanism is network streams of MP3 MP4 audio brought to life with Macromedia W3C animation.

A matching animated ad banner invites new fans to make a jukebox selection from any website.

Thank-you Phil Baca and Mad Handle for allowing me to make this piece a part of my portfolio.


Screens

Mad Handle supports all screens from iPhone to 4KTV.

Side-by-side portraits of Mad Handle running on simulated iPhone, iPad, and 4KTV screens show the visual layout adapting to each different screen size so that Mad Handle can be viewed by everyone, no matter what device they happen to be using.


Bandwidth

Mad Handle loads in only 282.7 kilobytes 0.00 gigabytes — about 0.7 seconds over real-world 3G wireless.


Standardization

Mad Handle is internationally standardized for universal compatibility.

W3C

Validate HTML or CSS code.

ISO


Keywords: music, music-album, vinyl, record, 45, 45-rpm, single, audio-player, audio-visualizer, data-driven-graphics, web-audio-api, svg-visualizer, mpeg-4, mp4, animation, artwork, code, digital-pen, digital-pencil, digital-ink, hand-drawn, hand-coded, handmade, interactive, html, svg, animated-svg, html5, css3, es5, unobtrusive-javascript, dom-scripting, responsive-animations, responsive-layouts, w3c, iso, audio, classlist, cssanimations, csstransforms, csstransitions, eventlistener, inlinesvg, json, opacity, preserve3d, queryselector, requestanimationframe, rgba, webaudio, xhrresponsetypejson.