home
essays
fanfics
second life
celts

Resources

fanpages
tutorials
oekaki
banners
goodies

Want this music player? Go here.

This is a tutorial for a simple and small music player on your website, made possible through Javascript. You can see it in action in my sidebar to the left.

This player only plays one track and has no volume control, but can be paused. You must have Javascript enabled for it to work. It is meant to be stylized however you like, and blend in with your website's own design, at least compared to the media player your browser defaults to.

Here is the HTML code for this player:

<audio id="my-audio"> <source src="AUDIO URL" type="audio/mpeg" /> <!-- place fallback here as <audio> supporting browsers will ignore it --> <a href="AUDIO URL">TRACK NAME</a> </audio> <div id="controls"> <span id="loading">loading</span> <button class="button" id="play" style="display:none"><img src="FAVICON URL 1" alt="Loudspeaker play"><i><b> TRACK NAME</i></b></button> <button class="button" id="pause" style="display:none"><img src="FAVICON URL 2" alt="Loudspeaker pause"><i><b> TRACK NAME</i></b></button></div></td> </tr> <script src="/foryou/musicplayer.js"></script>

And, here is the JavaScript (.js) code:

window.onload = () => { const audio = document.getElementById("my-audio"); const play = document.getElementById("play"); const pause = document.getElementById("pause"); const loading = document.getElementById("loading"); const bar = document.getElementById("bar"); const progress = document.getElementById("progress"); function displayControls() { loading.style.display = "none"; play.style.display = "block"; } // Check that the media is ready before displaying the controls if (audio.paused) { displayControls(); } else { // not ready yet - wait for canplay event audio.addEventListener("canplay", () => { displayControls(); }); } play.addEventListener("click", () => { audio.play(); play.style.display = "none"; pause.style.display = "block"; }); pause.addEventListener("click", () => { audio.pause(); pause.style.display = "none"; play.style.display = "block"; }); // Display progress audio.addEventListener("timeupdate", () => { // Sets the percentage bar.style.width = `${Math.floor( (audio.currentTime / audio.duration) * 100, )}%`; }); progress.addEventListener("click", (e) => { // Calculate the normalized position clicked const clickPosition = (e.pageX - progress.offsetLeft) / progress.offsetWidth; const clickTime = clickPosition * audio.duration; // Move the playhead to the correct position audio.currentTime = clickTime; }); };

You need both codes in order for this player to work! I keep the .js as a separate file in my directory. If you do not have a paid Neocities account, you may upload your audio file to a service like Catbox or other file storage platform.

Thank you to the Mozilla tutorials for helping me write this player.

Webrings here.