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.

By in Playground on
Old School Cassette Player with HTML5 Audio
Demo Download

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

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Cyberpunk inspired Three.js Scene with JavaScript and Blender

Animate a Camera Fly-through on Scroll Using Theatre.js and React Three Fiber

Drawing 2D Metaballs with WebGL2

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 108

Comments are closed.

    • Hey Kuba, thanks a lot! It’s highly experimental but you are of course free to use it! Cheers, ML

  5. Uffff rebrutal lo que haces…..te felicito nos haces los dias mas happy !!!… congratulations

  6. Awesome results, but I’m a little disappointed with the execution. Seems too many downloads/tutorials emphasize the HTML5/CSS3 something uses, and too often that makes one think that those will be the primary tools used. I guess you can’t have something like this without js, but I was hoping this would showcase something I didn’t really know well before – HTML5 and playing audio in the browser. I was hoping less js would be involved and more HTML5, CSS3, and browser tools. The sheer size of the jquery.cassette.js alone about gave me whiplash (for those who haven’t inspected it yet, it’s roughly 1000 lines of code that’s mostly undocumented, and it still relies on about 3 whole other js files and/or libraries — this having kicked my head in after all the MP3 players I made in Flash that ended up using about 1/10 as much coding).

  9. OMG!!, MARY LOU!, beautiful woman, your work always impresses!!! cheers from colombia 😉

  13. Love this.
    You are probably gonna hate this question but
    What would be the best way to shrink everything into 320×480 responsively?
    ie: Fixed pixel media queries values or fluid %

  15. this is awesome! any way to make the FF and REW actually play the music in double or triple speed instead of the reel-to-reel sound effect?

  16. This is an awesome tutorial, one of the best I have seen in quite some time

  19. It’s So Perfect… You are the sample that “Everything you can think, can become on web”.. Thank you so much for those brilliant ideas!

  20. This is awesome. I am not even going to look at the source code. This stuff is too advanced for me right now.

  21. wonderful idea ! but somehow i deleted your music from /sounds insert my mp3´s
    also changed the line in casette.js

    $.Cassette.defaults = {

    songs : [ ‘track2’, ‘Track14’ ],
    fallbackMessage : ‘HTML5 audio not supported’,
    // initial sound volume
    initialVolume : 0.7
    };

    but when i reload it is only “loading” doesnt start playing ..

  22. mary,

    you leaving me speach less from article to article
    and i have nothing to say anymore, except that you are fu……
    genius !!!!

    thanks

  23. Amazing experiment. The interface is fantastic. Codrops is the most interesting development blog in the internet. Great work.

  27. That is so sweet – and probably only to us older crew that grew up with those painful lovable machines.
    You just need to implement when they get jammed, chew your tape up and eject it to have a stream of mangled tape everywhere. Luv yr wk

  28. It’s just so amazing, en un mot “Génial” , Marylou chapeau bas.

    • Stop button is Pause Button… I would change the button Image from Square to || 🙂

  33. Once again! AWESOME. awesome awesome awesome. What does it feel like to be on the forefront of web technology?

  34. Hi MARY LOU…
    the example is awesome. I’ve never imagine that something like this would be exist.
    the audio works great. and cool switch, rewind and FF animation.

    Actually I’m silent reader of tympanus.net. You guys always bring fresh article about web development.

    But, do you guys can make some post about html5 audio player based on jQuery. But just a simple player.
    I do know about jPlayer. But I have no idea to implement it to wordpress theme. (I know there is a jPlayer plugin, but i need to create built in audio player in my wordpress theme).

    Thank you. 😀

  36. Thank you all for your super-great feedback!! I’m so happy you like it!! xxx ML

  40. Thanks so much for the awesome experiments! It really helps everyone starting out in the development community learn unique ways of creating interactive content. Keep up the awesome work!

  42. Really nice techniques. Can’t wait to try this out. Thanks for this post! Nice work.

  45. I haven’t seen anything better looking in a long while. Absolute top Manoela!

    Emil

  46. Shame it doesn’t work on the iPad. Haven’t tried to look into why – but a very cool bit of development.

  50. This has to be the funkiest HTML5 based player I have ever seen. Great job, I really love it!