A custom cassette player/animation for web.
This is an animation for the imminent release of Eldridge Gravy & the Court Supreme’s 3-song cassette tape. The cassette is modelled after the physical cassettes we used. I used Adobe Illustrator to draw the vector cassette art, and Adobe Animate for the bulk of the canvas animation.
 |
|---|
| Final animation |
Compatibility issues
There were a couple hiccups along the way. Animate’s HTML/Javascript export is not reliably compatible with many devices. I had originally conceived of much more animation and interactivity, but the more complex things I did, the less browsers and devices had good experiences. In the end I stuck to very simple animations - ones which I could have done directly with SoundJS and CreateJS instead of Animate if I’d had known how much I’d need to simplify things due to cross-platform issues.
In the end I just had to remove the animated reels (they rotated and re-sized as a song played or changing songs) and the flip animation.
 |
|---|
| Prototype animation |
More to come?
I have dreamed of making an interactive game where video and interactive elements correspond to the playthough of an audio track. I’m thinking along the lines of a playable music video: regular playback of a high-fidelity audio file with user-interactive animations/video elements perfectly timed to the beat, changing according to song sections.
This cassette animation project opened my eyes a bit to just how difficult that is. Audio files are usually treated as short low-quality clips, trigger-able sound effects, or completely independent background tracks. Hopefully sometime I’ll be able to revisit this idea with new tools.
