Calico's Custom Music Player

recently i recieved a comment asking about my audio player - i'm honestly surprised (in a good way!) that my simple audio player warranted someone wanting to know how to make one similar. ^__^
it's a bit messily put together, but hopefully this can help anyone interested in putting one on their site!!
if you use this, all i ask for is a tiny link back to my site somewhere, it can be on a credits page or an updates page... anything really, i just would appreciate it!!!

THE CSS

you'll need some very basic css in order to get this rolling, copy paste this into wherever you have your css located!! feel free to rename the classes, i just have very silly naming schemes, helps me remember things better!!!
/* music player container START */ /* please note, depending on your line spacing and font-size, you may need to adjust things slightly, but this will get the player styled in a basic way */ /* you're free to adjust anything!! if you do something really cool with it, please let me know!! i would love to see */ .freako { border: 1px ridge silver; /* player container border */ width: 190px; /* player container size, change it to whatever works for you but i don't recommend it being too short */ height: 30px; /* player container height, i like 30px, personally */ background-color: #000; /* player container backround colour */ color: #fff; /* player container text colour */ margin: auto; /* player container margin, this centers it, if you don't want it centered, then feel free to remove this or play around with it */ } .freakoinner { border: none; /* player container text area, i recommend no border */ width: 156px; /* player container text area width, make sure it's not as wide as the main container so the playbutton can work */ height: 30px; /* player container text area height, should be the same as the main container */ background-color: transparent; /* player container text area background, you can play with this if you wish */ color: #fff; /* player container text colour */ float: left; /* makes the text float left */ overflow: hidden; } .freakobutton { float: right; /* makes the play button float right */ margin-right: 7px; /* additional margin */ } .ico { color: #fff; /* play/pause button colour */ transition: 0.3s; /* controls the button animation upon hover */ } .ico:hover { color: grey; /* play/pause button hover colour */ transition: 0.3s; /* controls the button animation upon hover */ } .marquee { display: flex; flex-flow: row nowrap; white-space: nowrap; justify-content: flex-end; } .marqueecont { animation: marquee 7s 0s linear normal infinite; /* control the speed of your marquee here if needed */ position: relative; display: inline-block; padding-left: 200px; /* mess around with this if your song titles aren't scrolling properly :) */ } @keyframes marquee { 0% { right: -1rem; transform: translate(100%, 0%); } 100% { right: calc(100% + 1rem); transform: translate(0%, 0%); } } /* music player container FINISH */

THE HTML

next up is the html! there's also some javascript to change the play button to a pause button, you're free to replace it with whatever you'd like. i use font awesome for my icons, but if you have an alternative, you're free to use that. if you do use use font awesome, remember to set up a kit for your own usage, the icons will not show up otherwise!
<!-- begin audio stuffz --> <div class="freako"> <div class="freakobutton"><a onClick="togglePlay()"><span class="ico"><i class="fa-solid fa-play"></i></span></a></div> <div class="freakoinner"> <div class="marquee"><div class="marqueecont"><span id="songTitle"></span></div></div> </div> <script>document.querySelectorAll(".ico").forEach(element => element.addEventListener('click', (event) => { let iElement = event.currentTarget.querySelector('i'); iElement.classList.toggle("fa-play"); iElement.classList.toggle("fa-pause"); }));</script> <audio id="songUrl" preload="auto" loop></audio> </div> <!-- end audio stuffz -->

THE RANDOMISATION AND PLAY/PAUSE BUTTON

so you may have noticed that i'm not actually linking to any songs - this is because i have it set to be random upon refresh! if you would like one song only, all you need to do is delete the span element within the marquee and replace the text in the marquee with the name of your song! and then to link to your one song, you can just add src="URLHERE" to your audio element.
when i link to songs, i either use dropbox or catbox.moe, pick whatever works better for you. although for dropbox links, you'll need to make sure you replace www with dl. the end of the url should also have a dl=0.
<script> //play and pause button script var songUrl = document.getElementById("songUrl"); function togglePlay() { return songUrl.paused ? songUrl.play() : songUrl.pause(); }; </script> <script> //randomisation script var songs = [ { filename: "SONG URL 1", title: "SONG TITLE 1" }, { filename: "SONG URL 2", title: "SONG TITLE 2" }, { filename: "SONG URL 3", title: "SONG TITLE 3" } // and so on, just be sure to add a comma between songs (not the last one, do not put a comma there) ]; var randomIndex = Math.floor(Math.random() * songs.length); var song = songs[randomIndex]; document.getElementById("songUrl").src = song.filename; document.getElementById("songTitle").textContent = song.title; </script>

FINAL REMARKS

that's it really! if you have any questions, please feel free to ask me!! you should have something like the player on my site, if all went well. :3