i love music, and i especially love cassettes -- so, i wanted to incorporate those into a project!! also i wanted to make something purple. purple is nice.

i wanted to make something i could re-use in the future -- i'm planning on using iframes so i can incorporate this music player into my upcoming portfolio/personal website

to explore api integration !

you can input a playlist link (only to PUBLIC/UNLISTED youtube playlists) and it will put your songs into the player. you can skip back and forth, change the volume, and even press the thumbnail to link to the youtube page of a particular song.

you also get to see the song name animated and moving on the label of the cassette !!

if the user doesn't input a playlist, it is automatically set to one of my playlists so you can listen to music anyways! i primarily chose comfier songs that I listen to while coding

intended for web, not mobile

javascript, css, & html (github codespaces); cassette art drawn in pixquareuare

a myriad of w3schools tutorials. i <3 w3schools.ls.

i utilized youtube's api, which was integrated in order to control playback & dynamically update ui elements (song title, thumbnail, progress bar). the javascript listens for any player events, like going to the previous or next songs and syncs with the yt video datadata

it was difficult to extract metadata from the api and match it with my own js elements. i also wrestled with css to make everything fit well in the tiny playlist space, as well as had to figure out how to make the cassette label stay in the same place no matter the zoom level.

i also don't have too much background js knowledge compared to html and css, so i had to combine a lot of online tutorials for small aspects and manage to make them work together

unfortunately when deploying to github pages i had another problem --- the music player would trigger ads sometimes when pressing the next button --- but guess what!! i made it so instead of triggering nextVideo(), it would just simulate that by going towards the end of the song minus a few milliseconds so it would appear like you went to the next video when it was actually coasting on the non-ads autoplay!!

learned to sync ui elements with my player state.

i definitely better understand how to layout using divs in html and control them with css - i also think i am getting better at ui! - my colors and styling look much more simplified and consistent compared to my past projects - at least in my opinion!