F2U Code!!!

I've had a few requests to share some of my site code, so here it is :-) this is lONG overdue lol. all code is free 2 use and modify with attribution!

THE ODDITYCOMMODDITY MUSIC PLAYER

ok i will be real... this may be difficult to get working on other sites bc of how i made it. i made this by frankensteining/heavily modding other online html music player tutorials, i didn't really make it knowing people would want it LOL. but regardless i will try my best to explain how to set it up.

here is a zip of the files you will need

ok.. so the actual playlist itself is stored in the javascript under the variable 'songlist'. there you will need to put the song title/artist name/album name, a link to the album cover, and a link to the song itself. hopefully the json is labelled well enough that you can figure out where all of that goes lol. once you're done, run it through a json validator (everything from after 'var songlist =' to the end of the variable) to so you know you did it alright. once you've done that you're done with the js! yay!

ok next step. the way i had to do it was make a code element for each individual track. in the unordered list element in the html file, ul class='tracklist'. the list items inside that are the tracks. copy and paste if you need more, or cut away some if you have less tracks. if you add more, be sure to change the data-index and setTrack(number) accordingly. also, this code is designed to autoplay on page load. if you don't want that happening, remove the 'playSong();' at the bottom of the script.

last step, customization! a lot of the stuff that customizes it can be found in the html, so feel free to swap around the file paths to your own assets (in fact i encourage it!! please customize this don't let it be exactly like mine.) all i ask is that you don't remove the attribution element at the bottom pretty please (you can style it to fit your customization tho) :-)

that's it! have fun, lemme know if any of you guys need help :-D

THE STICKER BANK

hi. sorry i took so long to add this. quite frankly the amount of time it took me to put together this tutorial compared to how long it took me to just sit down and do it is embarassing but well. executives gonna dysfunction!

its actually hilarious to me how much this was requested and how frequently it was, like out of nowhere i had like 5 separate people asking for this within days of each other. which i cant blame them stickers are awesome.

your zip file, m'lord

setting this up is not nearly as hard as the music player. inside the div that says "class="draggable"", there's an image; change that src to your sticker's image path. you can change the width from here also, and change the position it loads in at through the div's top and left attributes. you can actually assign the draggable class to any div you want i think, but you might have to do some troubleshooting with it to get it looking right. if you run into any issues installing this, make sure that you're putting the script at the very bottom of the body tag.

thats it have fun :0)! no need to credit me on this one, i took it from someone else who i think took it from w3 and told me "ideas are free and i ♥ free stuff" when i asked lol