Old School Cassette Player with HTML5 Audio

Vintage format meets modern web tech: an HTML5 audio player with realistic controls. Today we want to share an audio player with you that looks like an old school music cassette.

Old School Cassette Player with HTML5 Audio

View demo Download source

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.”

Compact Cassette, Wikipedia

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!

See the demo Old School Cassette Player with HTML5 Audio

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! 🙂

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 108

Comments are closed.
  1. 2

    Yeah ….
    Congratulations ! …. and tnkx to Mauricio Estrella and Blue Ducks and Blank & Kytt .

    🙂 🙂 🙂 🙂 🙂

    Daniel.

  2. 4

    Things like this is why I love this site. Its projects like this that just make my mouth drop. This is beautiful. AMAZING JOB!

  3. 6

    Nice! It was the sound of clicking in the buttons that did it for me man…:)

  4. 8

    Pity that it’s not possible to press play and fast forward at the same time though…

  5. 13

    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?

    • 14

      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.

  6. 15

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

  7. 17

    Super nice… It made me smile. There is always a display of highly creative stuff on this site.. Thanks guyz.

Comments are closed.