Darlo's YouTube Mixtape

Darlo has a playlist on YouTube of songs to listen to at anytime for any purpose. Why not listen to them via mixtape?

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!

Paste the URL of the song or playlist that you want to play.
Playlist: https://www.youtube.com/playlist?list=OLAK5uy_mwhmpStQ41tx1YVsNmK-0-o2s41knauy4

Video: https://www.youtube.com/watch?v=kT8cX2-_7pQ

Video Within Playlist: https://www.youtube.com/watch?v=IHEpGHsKdV0&list=PLcIDqHah6ZnDfckv4K6epvr3i6TbExM_8&index=5
Loading ...
Loading ...
0:00 / 0:00