If you don’t know what a cassette is, you were probably born in the digital high-tech era, an era that is undoubtedly exciting and innovative. On the other hand, if you know what an audio cassette is, you belong to the older generation, the analog dinosaurs that know the painful connection between a pen and a cassette tape.
The invention of the compact cassette tape happened 50 years ago, so it’s time to celebrate:
“In 1962 Philips invented the compact audio cassette medium for audio storage, introducing it in Europe in August 1963 (at the Berlin Radio Show), and in the United States (under the Norelco brand) in November 1964, with the trademark name Compact Cassette.”
Since the old-fashioned cassette player is disappearing, we wanted to commemorate it by sharing an old school cassette player build with HTML5 audio with you. It’s just an experiment and the idea is to imitate the behavior of a vintage cassette tape (play, stop, rewind, fast forward and side switch) and use HTML5 audio. The magnetic tape inside should move as well accordingly. It’s far from being a perfect imitation of the classic cassette tape, it’s really just a fun experiment. You will probably find many bugs!
The beautiful cassette tape is by Mauricio Estrella and he shares his pixel-perfect PSD here:
Cassette – PSD File by Mauricio Estrella
The songs in the demo are by the highly talented Blue Ducks and Blank & Kytt:
The tape sound effects are from Pogotron’s sample on Freesound.org:
Tape Recorder.wav by Pogotron
For the volume control we used the great KnobKnob jQuery plugin by Martin Angelov.
The icon font that we use for the player controls are from the Font Awesome icon font by Dave Gandy and we’ve used Fontello for creating a custom set. The Font Awesome icon set is licensed under CC BY 3.0.
We really hope you enjoy this little time travel, turn your sound on and play with it and tell us if you got nostalgic :)
Please note that this is highly experimental and for fun purpose only. There is no fallback for older browsers (irony!) and only super-funky disco moves are allowed! :)
Awesome !!
Really nice techniques. Can’t wait to try this out. Thanks for this post! Nice work.
Absolutely awesome. Great work Mary Lou!
How fun! Thanks for sharing!
I haven’t seen anything better looking in a long while. Absolute top Manoela!
Emil
Shame it doesn’t work on the iPad. Haven’t tried to look into why – but a very cool bit of development.
Are you human? I think you come from another planet.
Amazing,
thankyou very much
so cool
AWASOME,,,,,
This has to be the funkiest HTML5 based player I have ever seen. Great job, I really love it!
Awesome, simply superb
http://www.noahandthewhale.com/tapedeck.php
this have been live for more than a year.
1 year is a long time :) Very nice demo btw! Cheers, ML
Hi ! Really nice release. Thx !
But one question : is it possible to use streaming (url/m3u format) ? Tried something but doesn’t work… :)
This is mind-blowing… :) :D
Wow, that is nice. Great work :) Good old cassettes, take me back.
Breathtaking!
excelent!
hi. good job but it was working just in chrome , it’s so bad, why just working in chrome ??
Simply stunning, like all your posts!
Great work!
great & amazing i cant find words to describe it
will this play a live stream from a shout cast server? if yes can some one post how.?
thx in advance