Coding a Custom HTML Audio Player (Part 1)

In previous posts, we discussed the basics of the html audio element and how to style the audio element with CSS. Now we are going to get into some more advanced things you can do with the <audio> element with JavaScript and some functions that are built into the browser.

The first thing we will do is remove the controls attribute so that instead of

<audio src="path/to/your/audio.mp3" type="audio/mpeg" controls></audio>

we have

<audio src="path/to/your/audio.mp3" type="audio/mpeg"></audio>

But now there’s nothing on the page! Yes, that’s a good thing. It’s still there in the DOM, and we are going to use it to make our own HTML audio player on the page. Let’s add an id attribute so that we can hook into it:

<audio id="my-audio" src="path/to/your/audio.mp3" type="audio/mpeg"></audio>

Now let’s add a tiny bit of JavaScript underneath this. All we are going to do here is hook into the audio element so that we can then manipulate it. I’ve added the console.log just so that we can look in the browser console to make sure we have it correctly.

<audio id="my-audio" src="path/to/your/audio.mp3" type="audio/mpeg"></audio>

var myAudio = document.getElementById('my-audio');

(NOTE: In my examples I will have the shadow DOM revealed in my console. If you want to learn how to do this see how to expose the shadow DOM in my previous post.)

Now when you inspect your console you should see something like this:

Viewing javascript console of audio element

Adding Control Buttons

So far, so good. We have a handle on the audio element, and now we can start building a play/pause button, volume controls, and other useful UI pieces. Add this code to create a function called playMusic (you can name it whatever you want) that will play the audio found connected to the object myAudio:

var myAudio = document.getElementById('my-audio');

var playMusic = function() {

And in your HTML add a button that calls that function when clicked:

<audio id="my-audio" src="path/to/your/audio.mp3" type="audio/mpeg"></audio>

<button onclick="playMusic()">Play</button>

It should work the way this button does below:

But you don’t have to necessarily attach the click event to a button. You could also have the click event on a div like the one below. Click it to try it out:


…or a hover or a focus, or any other DOM event.  Let’s clean up out code at this point.  I’m not a big fan of using inline onclick events, so instead we’ll use a click listener on our JS:

<audio id="my-audio" src="path/to/your/audio.mp3" type="audio/mpeg"></audio>

<button id="play-button">Play</button>

var myAudio = document.getElementById('my-audio');
var playButton = document.getElementById('play-button');

playButton.addEventListener("click", function(){;

Those are the very basics of it all, but there are a lot more things attached to myAudio. Here are some methods you can use:


And there are many properties on the audio object that you can retrieve and also change programmatically:


Many of these have Boolean values, and others are numeric or strings. There is a good explanation of all of these at:

If we wanted to add a pause button and some volume up/down buttons it could be as simple as

<audio id="my-audio" src="path/to/your/audio.mp3" type="audio/mpeg"></audio>

<button id="play-button">Play</button>
<button id="pause-button">Pause</button>
<button id="vol-up-btn">Volume Up</button>
<button id="vol-down-btn">Volume Down</button>

var myAudio = document.getElementById('my-audio');
var playButton = document.getElementById('play-button');
var pauseButton = document.getElementById('pause-button');
var volUpButton = document.getElementById('vol-up-btn');
var volDownButton = document.getElementById('vol-down-btn');

playButton.addEventListener("click", function(){;
pauseButton.addEventListener("click", function(){
volUpButton.addEventListener("click", function(){
volDownButton.addEventListener("click", function(){

This is probably a good place to stop for now. There is enough here to get you started and to get you thinking about what features you want your player to have and what information you want to add to the UI.

In the next article we will take these concepts and build an HTML audio player with a volume slider, and playtime clock.

2 thoughts on “Coding a Custom HTML Audio Player (Part 1)”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • CSS Styling the Audio Element

    There are a few things you can do with CSS to style the HTML audio element in various browsers.

  • How to Get WP RSS Aggregator Feed to Validate

    I’m using the plugin WP RSS Aggregator, and I couldn’t get the custom feed to validate in other places. The validator said that it was missing an <author> field. If an item doesn’t have an author, then the feed doesn’t even supply an empty one. The way to fix it is to go to wp-content/plugins/wp-rss-aggregator/templates/custom-feed/entry.twig ... Read more

  • How to Remove Rank Math Top Banner

    Rank Math has added an ugly top banner to the sites using its plugin. Here's how to hide it.

  • Fix for High CPU Usage on Siteground

    The MailPoet cron job on my website was triggered by Google Bot and caused my CPU seconds on Siteground to go over the quota. Here's how I fixed it.

  • Fast MIDI Song Starter

    Here is a really easy way to build MIDI chord progressions using iRealPro.

  • What is Full Kontakt Required?

    Perhaps you don't know what Kontakt is or how it works. Hopefully we can sort these things out and get you on your way to making some music.

  • How To Style a Range Input Slider

    If you are going to build a custom html audio player, you will need to know how to style a range input slider.

  • How to Build a HTML Audio Player with Vanilla JS (Part 2)

    Here is another tutorial on how to build a custom html audio player with vanilla js.

  • Coding a Custom HTML Audio Player (Part 1)

    Here is a starter tutorial on how to create a custom HTML audio player with HTML and JavaScript.