Web Cassette Player

This was my final project for NMED 4520, I wanted to create the experience of playing cassettes.

So I started off by creating all the components of the cassette and player using SVG. Using CSS Grid I placed those components inside of a grid to mimic the look of a cassette player.

Using many onclick events and functions, I coded in analog button sounds and I used GSAP to create animations for playing, fast-forwarding, rewinding, stopping, injecting cassettes, and ejecting cassettes. Just to make the player feel more alive.

For the actually sound of the project, I ended up using P5.js and its sound library. I took advantage of being able to reference functions within the setup function and was able to control P5.js outside of the canvas. All in and all a pretty janky way of manipulating audio, I would like to expand on this but most likely with a different library intended for audio.

Overall, this was one of my favorite websites to work on and I want to work on this website more to polish it off and make it the best it can be.