Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now →
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, 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… 🙂 😀
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
Mary! You are Awesome!
Yeah ….
Congratulations ! …. and tnkx to Mauricio Estrella and Blue Ducks and Blank & Kytt .
🙂 🙂 🙂 🙂 🙂
Daniel.
This is so full of WIN! Very nice.
Things like this is why I love this site. Its projects like this that just make my mouth drop. This is beautiful. AMAZING JOB!
AWESOME
Nice! It was the sound of clicking in the buttons that did it for me man…:)
Awesome !!! *o*
Pity that it’s not possible to press play and fast forward at the same time though…
I have this found: http://www.opustalis.com/play/
That’s so cool!
Pixel perfect and fully usable.
Really cool!
Can I put this on auto play somehow?
even if i just upload the source folder to my server, it doesn’t work in firefox. works in safari and chrome just fine though.
any ideas on what i am missing?
nevermind! figured it out. it’s a server side problem, i had to define .ogg as a MIME type via .htaccess. extension: .ogg MIME type: audio/ogg fixed it.
Hi,
Thanks for this super cool Cassette player. How can i change the songs or put songs from other artist? lol, I know it’s stupid question but i can’t figure it out where to….
Wow thanx can I use this and tweek around the code?
Super nice… It made me smile. There is always a display of highly creative stuff on this site.. Thanks guyz.
Hi can it work on iPhone? I could not view it through iPhone though
Awesome!
Thanks for your creation!
He he, i remember the time when everyone has cassette player. This is brilliant.
This is freakin beautiful. Thanks!
ROW! Is that cool!!!!
LOVE this.
I dont understand why it is not working for me…
I putted 4 differents mp3 into songs folder, then in the file jquery.cassette.js I changed this line using the name of mp3 I want to use:
songs : [ ’01.mp3′, ’02.mp3′, ’03.mp3′, ’04.mp3′, ’05.mp3′ ],
I didnt put ogg versions, is maybe this?
Thanks for reply 🙂
uhmm, sorry I mean I put 5 mp3 tracks like this:
songs : [ ’01’, ’02’, ’03’, ’04’, ’05’ ],
guaaaaaaaaauuuuuuuuuuuuu!!!!!!!
greeeeeeaaaaaaaat!!,
to someone like me, so music is really important dy by day, I´ll put in my website, right now!!
excuse me my bad english
wow ,
looking a great style and
very nice one one
Works in wordpress?
Hi Manoela,
thanks for your great articles! Any idea how to get this to work on other browsers (that support html5) and ios? Seems to be something in the buttons that is breaking it in some situations…
Cheers
J
stream?
Woow, great fun!!
Gonna use it for our radiostation website playing our radio shows.
A little sad my iPhone doesn’t play the audio.
Hi Stela! Nice Stuff! I am trying to change the source of the music but it’s not possible (I am trying to implement it in a WP theme, one of my own, just for fun!…) Could you give me some clues? Many thanks! Awesome development!
Fantastic player. I’m a little surprised that it works like a charm in the current Firefox (Windows 7) but doesn’t play tracks longer than 1:20 minutes in the current Chrome browser (Windows 7). As long as the songs are shorter than 1:20 minutes, all is fine, in Chrome, too.
Annoying problem. Any solution for longer tracks?
Awesome!
I’ll just don’t understand the following:
When I’ll download the archive and run the index.html inside everything works perfectly unless I start index.html from a local server (xampp) it loads forever (http://127.0.0.1/casette/)…
I thought might be a problem with a wrong path or something but nope that wasnt the problem.
I’ll tried also changing songs same problem loads forever…
Firebug didn’t log any issues. I thought it might be a mime problem so I’ll added them also to a htaccess but this seems not to be the problem it still loads forever…
So in other words I can’t make it work on a local apache server 🙁
Kinda clueless here right now 🙁
coooooool?
You made my day! 🙂
It’s really really great player. I loved it. But i have a little problem, maybe it’s easy but i can’t figured it.
I added my mp3 files and changed the line in jquery.cassette.js like this;
songs : [ ’01’, ’02’, ’03’, ’04’ ]
Player working on IE, but not working in FF and Chrome.
Example: http://www.muratkaraoglu.com
Can you help me?
Best regards, Murat.
That was more thought out than I thought it would be when I clicked through. Good job! I’m… glad we left those behind, and VHS.
so beautiful. i love it.
Really fantastic. Is there any way to make it play automatically on document load?
nice but, on IE the string of tape suddenly getting bigger after done playing..
i really love this! quite a long time i never saw something as cool as this…