So what's this about then? Like many others I like to listen to music while I'm working. Also like many other folks, I have a bunch of different songs that I can listen to and enjoy at almost any moment. Since YouTube is full of these songs, it was quite easy to make a playlist with them.
So why the tape player? In a similar fashion to when I did Smilky in CSS, after looking at my dad's stereo I started to wonder if a tape deck could be recreated in CSS. And then it hit me that using the YouTube API, something I'd been playing with for my UK Number Ones thingy, with a little JavaScript it would be possible to play music and update the song on the tape deck.
When I remembered that you could animate rotations in CSS, I started thinking about actually having a tape playing on screen. Then wondered how hard it would be to actually get the tape to transfer between the reels, and before I knew it I had VS Code open and was working on a basic cassette tape.
Just under a week later I had the tape player that I had first imagined, but then wanted more. I wanted to add functioning buttons and be able to change the 'tape'.
This project has been a huge practice in both JavaScript and CSS (well, SASS). Clip paths have been a major thing here, and some of those stripes sure were a pain (I'm looking at you, red and blue stripes). As the API help section is somewhat lacking, not too many Stack Overflow questions covered topics I needed, I really had to play around with the API and get those hidden gems to get everything going. Lots of bodging, that's for sure!
There is a lot of cleaning up in the code I could do, such as cutting out some of the repetitions, but for now someone please stop me before I add even more to this!