How to Build an HTML5 Audio Player with Custom Controls: A Simple Guide

Want to build your audio player for your website? In this guide, we will teach you how to create an HTML5 audio player with custom controls using easy language.

Introduction

An HTML5 audio player with custom controls can make your website more interactive and user-friendly. By making your audio player, you can decide how it looks and works. Let’s learn how to create one step-by-step.

What You Need

Before we start, make sure you have:

Basic knowledge of HTML, CSS, and JavaScript
A text editor like VS Code or Notepad++
A web browser to test your player
An audio file (like .mp3 or .ogg)

Setting Up the HTML

First, we need to set up the basic HTML for our audio player. This includes the audio element and custom control buttons.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom HTML5 Audio Player</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="audio-player">
        <audio id="audio" src="audio-file.mp3"></audio>
        <button id="play-pause">Play</button>
        <button id="stop">Stop</button>
        <button id="volume-up">Volume Up</button>
        <button id="volume-down">Volume Down</button>
        <span id="current-time">00:00</span> / <span id="duration">00:00</span>
    </div>
    <script src="script.js"></script>
</body>
</html>

Adding Some Style with CSS

Next, let’s add some CSS to style our audio player. This will make it look good and organize the buttons.

CSS

body {
    font-family: Arial, sans-serif;
}

.audio-player {
    max-width: 400px;
    margin: 50px auto;
    text-align: center;
}

.audio-player button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    font-size: 16px;
}

.audio-player button:hover {
    background-color: #45a049;
}

.audio-player span {
    font-size: 14px;
    display: inline-block;
    margin-top: 10px;
}

Making It Work with JavaScript

Now, we need to add JavaScript to make the custom controls work. This includes playing, pausing, stopping, controlling the volume, and showing the time.

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const audio = document.getElementById('audio');
    const playPauseBtn = document.getElementById('play-pause');
    const stopBtn = document.getElementById('stop');
    const volumeUpBtn = document.getElementById('volume-up');
    const volumeDownBtn = document.getElementById('volume-down');
    const currentTimeSpan = document.getElementById('current-time');
    const durationSpan = document.getElementById('duration');

    playPauseBtn.addEventListener('click', () => {
        if (audio.paused) {
            audio.play();
            playPauseBtn.textContent = 'Pause';
        } else {
            audio.pause();
            playPauseBtn.textContent = 'Play';
        }
    });

    stopBtn.addEventListener('click', () => {
        audio.pause();
        audio.currentTime = 0;
        playPauseBtn.textContent = 'Play';
    });

    volumeUpBtn.addEventListener('click', () => {
        if (audio.volume < 1) audio.volume += 0.1;
    });

    volumeDownBtn.addEventListener('click', () => {
        if (audio.volume > 0) audio.volume -= 0.1;
    });

    audio.addEventListener('timeupdate', () => {
        const currentMinutes = Math.floor(audio.currentTime / 60);
        const currentSeconds = Math.floor(audio.currentTime % 60);
        const durationMinutes = Math.floor(audio.duration / 60);
        const durationSeconds = Math.floor(audio.duration % 60);
        
        currentTimeSpan.textContent = `${currentMinutes}:${currentSeconds < 10 ? '0' : ''}${currentSeconds}`;
        durationSpan.textContent = `${durationMinutes}:${durationSeconds < 10 ? '0' : ''}${durationSeconds}`;
    });
});

OutPut Result

How to Build an HTML5 Audio Player with Custom Controls

Extra Features

Here are some additional features you can add to make your HTML5 audio player even better:

A progress bar to show how much of the audio has played.
A playlist to play multiple audio files.
More advanced volume controls, like a mute button.
Customized appearance using more advanced CSS or images.

For more details, check out:- Click Here

Table of Contents