Simple HTML Custom Audio Player (Free Download)

Welcome to a quick tutorial and example on how to create an HTML custom audio player. So you want to create a custom audio player? Well, the default <audio> cannot be styled using CSS at the time of writing. The only way is to recreate an audio player – Here’s a simple one that I have made, read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

HOW TO USE

<!-- (A) CSS & JS -->
<!-- https://fonts.google.com/icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="aud-player.css">
<script defer src="aud-player.js"></script>
 
<!-- (B) AUDIO PLAYERS -->
<div class="aWrap" data-src="S1.mp3"></div>
<div class="aWrap" data-src="S2.mp3"></div>

If you just want to use this as a “plugin”:

1. Load Google Material Icons, the audio player CSS and JS.
2. Create as many <div class="aWrap" data-src="AUDIO-FILE"> as required.

 

 

 

PART 1) TIME FORMAT HELPER FUNCTION

// (A) SUPPORT FUNCTION - FORMAT HH:MM:SS
var timeString = secs => {
  // (A1) HOURS, MINUTES, SECONDS
  let ss = Math.floor(secs),
      hh = Math.floor(ss / 3600),
      mm = Math.floor((ss - (hh * 3600)) / 60);
      ss = ss - (hh * 3600) - (mm * 60);
 
  // (A2) RETURN FORMATTED TIME
  if (hh>0) { mm = mm<10 ? "0"+mm : mm; }
  ss = ss<10 ? "0"+ss : ss;
  return hh>0 ? `${hh}:${mm}:${ss}` : `${mm}:${ss}` ;
};

Right at the top of the Javascript, we have a support function to format the “track time” into a “nice format” of HH:MM:SS.

 

 

PART 2) HTML LAYOUT

window.addEventListener("load", () => { for (let i of document.querySelectorAll(".aWrap")) {
  // (B) AUDIO + HTML SETUP + FLAGS
  i.audio = new Audio(encodeURI(i.dataset.src));
  i.innerHTML =
    `<button class="aPlay" disabled><span class="aPlayIco material-icons">
      play_arrow
    </span></button>
    <div class="aCron">
      <span class="aNow"></span> / <span class="aTime"></span>
    </div>
    <input class="aSeek" type="range" min="0" value="0" step="1" disabled>
    <span class="aVolIco material-icons">volume_up</span>
    <input class="aVolume" type="range" min="0" max="1" value="1" step="0.1" disabled>`;
  i.aPlay = i.querySelector(".aPlay"),
  i.aPlayIco = i.querySelector(".aPlayIco"),
  i.aNow = i.querySelector(".aNow"),
  i.aTime = i.querySelector(".aTime"),
  i.aSeek = i.querySelector(".aSeek"),
  i.aVolume = i.querySelector(".aVolume"),
  i.aVolIco = i.querySelector(".aVolIco");
  i.seeking = false; // user is dragging the seek bar
  //  ...
}});

On window load, we grab all .aWrap and insert the necessary HTML.

• <button class="aPlay"> The play/pause button.
• <span class="aNow"> is the current playtime of the track, <span class="aTime"> is the total time of the track.
• <input class="aSeek"> Time seek slider, the value is in seconds.
• <span class="aVolIco> Volume icon and mute button.
• <input class="aVolume"> Volume slider.

 

 

PART 3) PLAY/PAUSE BUTTON

// (C) PLAY & PAUSE
// (C1) CLICK TO PLAY/PAUSE
i.aPlay.onclick = () => {
  if (i.audio.paused) { i.audio.play(); }
  else { i.audio.pause(); }
};
 
// (C2) SET PLAY/PAUSE ICON
i.audio.onplay = () => i.aPlayIco.innerHTML = "pause";
i.audio.onpause = () => i.aPlayIco.innerHTML = "play_arrow";

• (C1) Don’t think this needs any explanation… If the audio is paused, we click to play. If the audio is playing, we click to pause.
• (C2) Automatically set the play/pause icon on the button.

 

PART 4) TRACK TIME

// (D) TRACK PROGRESS & SEEK TIME
// (D1) TRACK LOADING
i.audio.onloadstart = () => {
  i.aNow.innerHTML = "Loading";
  i.aTime.innerHTML = "";
};
 
// (D2) ON META LOADED
i.audio.onloadedmetadata = () => {
  // (D2-1) INIT SET TRACK TIME
  i.aNow.innerHTML = timeString(0);
  i.aTime.innerHTML = timeString(i.audio.duration);
 
  // (D2-2) SET SEEK BAR MAX TIME
  i.aSeek.max = Math.floor(i.audio.duration);
 
  // (D2-3) USER CHANGE SEEK BAR TIME
  i.aSeek.oninput = () => i.seeking = true; // prevents clash with (d2-4)
  i.aSeek.onchange = () => {
    i.audio.currentTime = i.aSeek.value;
    if (!i.audio.paused) { i.audio.play(); }
    i.seeking = false;
  };
 
  // (D2-4) UPDATE SEEK BAR ON PLAYING
  i.audio.ontimeupdate = () => {
    if (!i.seeking) { i.aSeek.value = Math.floor(i.audio.currentTime); }
    i.aNow.innerHTML = timeString(i.audio.currentTime);
  };
};

• (D1) Set a “now loading” message in the track time while the track is loading.
• (D2) On metadata loaded (information on the track), a whole load of things needs to be done. Not going to explain line-by-line, but basically:
  • (D2-1) Set the HTML track time.
  • (D2-2) Also set the track time on the seek bar.
  • (D2-3) Update the track when the seek bar is being dragged. Take note of how we use the seeking flag here – We do not want the manual seek to clash with the auto-update as the track is playing.
  • (D2-4) Automatically update the HTML seek bar as the track plays.

 

 

PART 5) VOLUME CONTROL

// (E) VOLUME
i.aVolIco.onclick = () => {
  i.audio.volume = i.audio.volume==0 ? 1 : 0 ;
  i.aVolume.value = i.audio.volume;
  i.aVolIco.innerHTML = (i.aVolume.value==0 ? "volume_mute" : "volume_up");
};
aVolume.onchange = () => {
  i.audio.volume = i.aVolume.value;
  i.aVolIco.innerHTML = (i.aVolume.value==0 ? "volume_mute" : "volume_up");
};

Well… Mute/unmute and update the volume as the user moves the slider.

 

PART 6) ENABLE/DISABLE CONTROLS

// (F) ENABLE/DISABLE CONTROLS
i.audio.oncanplaythrough = () => {
  i.aPlay.disabled = false;
  i.aVolume.disabled = false;
  i.aSeek.disabled = false;
};
i.audio.onwaiting = () => {
  i.aPlay.disabled = true;
  i.aVolume.disabled = true;
  i.aSeek.disabled = true;
};

• canplaythrough When the browser has sufficient audio buffer to play through, we enable the controls.
• waiting When there is an insufficient buffer, we disable the controls.

 

 

 

ADDING FILE/TRACK NAME

• Very simple solution – <div>MY TRACK NAME</div><div class="aWrap"></div>.
• Not simple solution – Add <div class="aWrap" data-name="MY TRACK NAME">, change the HTML in part (B) to adapt the name.

 

CHANGING THE AUDIO SOURCE PROGRAMMATICALLY

• <div class="aWrap" id="demo">
• document.getElementById("demo").audio.src = "ANOTHER.MP3";

 

COMPATIBILITY CHECKS

• Audio Element
• Arrow Functions
• Range Input

This audio player is obviously not backward compatible with the ancient browsers. But it should work well across all “Grade A” modern browsers.

 

LINKS & REFERENCES

• HTML Media Element– MDN
• HTML Audio – WhatWG
• Audio Player With Playlist – Code Boxx
• PHP Audio Player With Playlist – Code Boxx