Building a Basic Audio Player with HTML, JavaScript, and CSS

Audio players are a common feature on many websites, and creating a simple one using HTML, JavaScript, and CSS is a straightforward project. In this tutorial, we will guide you through the process of building a basic audio player with play and pause controls. You can also download the source code for this example at the end.

HTML Structure

First, let's create the HTML structure for our audio player. You need to have an <audio> element to play the audio, and optionally, you can add custom controls. Here's the HTML code for our audio player:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Audio Player</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="audio-player">
        <audio controls>
            <source src="your-audio-file.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </div>
    <script src="script.js"></script>
</body>
</html>

In this code, we have included an <audio> element with the "controls" attribute, which provides standard play, pause, and volume controls for the audio. Replace "your-audio-file.mp3" with the actual path to your audio file.

Styling with CSS

Now, let's add some basic styling to make our audio player visually appealing. Create a CSS file (style.css) and add your styling rules. Here's a minimal example:

/* You can style the audio player here */
.audio-player {
    width: 300px;
    margin: 20px;
}

You can customize the CSS to match your website's design preferences. In this example, we've set a fixed width and added some margin to create spacing.

Adding Custom Controls with JavaScript

If you want to include custom controls, such as your own play and pause buttons, you can use JavaScript to enhance the functionality. Create a JavaScript file (script.js) and add your custom controls:

const audio = document.querySelector("audio");

// Example: Add custom play/pause buttons
const playButton = document.getElementById("play-button");
const pauseButton = document.getElementById("pause-button");

playButton.addEventListener("click", () => {
    audio.play();
});

pauseButton.addEventListener("click", () => {
    audio.pause();
});

In this JavaScript code, we select the <audio> element and create event listeners for custom play and pause buttons. When the play button is clicked, it plays the audio, and when the pause button is clicked, it pauses the audio.

Download the Source Code

Link will be available soon

You can download the complete source code for this example here:

Download Simple Audio Player Source Code

Please note that to test the audio player properly, you may need to serve these files through a web server or a local development environment due to security restrictions that prevent audio playback when opening HTML files directly in a browser.

With this tutorial and source code, you have the foundation for creating a basic audio player for your web projects. You can further enhance it with additional features and styling to match your specific needs and design. You can try the advanced version.

Advanced version

Creating an advanced version of an audio player in HTML, JavaScript, and CSS can include additional features like a custom progress bar, volume control, and time display. Below is an example of an advanced audio player:

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>Advanced Audio Player</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="audio-player">
        <audio id="audio" controls>
            <source src="your-audio-file.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        <div class="controls">
            <button id="play-pause-button">Play</button>
            <input type="range" id="volume-control" min="0" max="1" step="0.01" value="1">
        </div>
        <div class="progress">
            <div class="progress-bar" id="progress-bar"></div>
        </div>
        <div id="current-time">0:00</div>
        <div id="total-time">0:00</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (style.css):

/* Customize the advanced audio player's appearance here */
.audio-player {
    width: 400px;
    margin: 20px;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.progress {
    height: 10px;
    background-color: #ccc;
    margin-top: 10px;
}

.progress-bar {
    width: 0;
    height: 100%;
    background-color: #4caf50;
}

#current-time, #total-time {
    margin-top: 10px;
}

JavaScript (script.js):

const audio = document.getElementById("audio");
const playPauseButton = document.getElementById("play-pause-button");
const volumeControl = document.getElementById("volume-control");
const progressBar = document.getElementById("progress-bar");
const currentTimeDisplay = document.getElementById("current-time");
const totalTimeDisplay = document.getElementById("total-time");

let isPlaying = false;

playPauseButton.addEventListener("click", () => {
    if (isPlaying) {
        audio.pause();
        playPauseButton.textContent = "Play";
    } else {
        audio.play();
        playPauseButton.textContent = "Pause";
    }
    isPlaying = !isPlaying;
});

volumeControl.addEventListener("input", () => {
    audio.volume = volumeControl.value;
});

audio.addEventListener("timeupdate", () => {
    const currentTime = audio.currentTime;
    const duration = audio.duration;

    const currentMinutes = Math.floor(currentTime / 60);
    const currentSeconds = Math.floor(currentTime % 60);
    const totalMinutes = Math.floor(duration / 60);
    const totalSeconds = Math.floor(duration % 60);

    currentTimeDisplay.textContent = `${currentMinutes}:${currentSeconds < 10 ? '0' : ''}${currentSeconds}`;
    totalTimeDisplay.textContent = `${totalMinutes}:${totalSeconds < 10 ? '0' : ''}${totalSeconds}`;

    const progress = (currentTime / duration) * 100;
    progressBar.style.width = `${progress}%`;
});

This advanced audio player includes a custom play/pause button, a volume control slider, a progress bar, and displays for current and total time. It provides a more interactive and informative audio playback experience for users. Make sure to replace "your-audio-file.mp3" with your actual audio file path. You can further customize the styling and functionality to meet your project's specific requirements.

HTML tags used in the example I provided for creating an audio player in HTML

In the example I provided for creating an audio player in HTML, several HTML tags are used. Here's a list of the key HTML tags used in that example:

<html>: The root element that encapsulates the entire HTML document.
<head>: Contains meta-information about the document, such as the title and links to external resources like stylesheets and scripts.
<title>: Sets the title of the web page, which is displayed in the browser's title bar or tab.
<link>: Specifies external resources, such as stylesheets, to be used in the document.
<body>: Contains the content of the web page that is visible to the user.
<div>: A block-level container that is often used for grouping and styling HTML elements.
<audio>: An HTML5 element used to embed audio content, providing native audio controls and support for various audio formats.
<source>: Used within the <audio> element to specify different audio sources or formats for the browser to choose from.
<button>: Creates a clickable button that can trigger JavaScript actions.
<input>: Represents an input control, such as a range input for the volume control slider.

These HTML tags are combined to create the structure of the web page and the audio player with its controls and elements for interaction and display.

Blog

How To Create A Simple Audio-player in HTML, JavaScript, and CSS

CtrlCoding