English

HTML Tutorial

HTML Tables

HTML Lists

HTML Links

HTML References

HTML Color Names & Values

HTML Forms

HTML Media

HTML Header

HTML Layouts

HTML Graphics

HTML APIs

HTML Miscellaneous

HTML Demo

HTML Tools

HTML Resources

HTML - Audio Player

Welcome, aspiring web developers! Today, we're diving into the exciting world of HTML audio players. By the end of this tutorial, you'll be able to create your own custom audio player and even add some cool visual effects. So, let's get our coding hats on and start this musical journey!

HTML - Audio Player

HTML Local Audio Player with Visualizer

The Basics of HTML Audio

Before we jump into creating a fancy audio player, let's start with the basics. HTML5 introduced the <audio> element, which makes it super easy to add audio to your web pages. Here's a simple example:

<audio controls>
  <source src="your-audio-file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

In this code:

  • The <audio> tag creates an audio player.
  • The controls attribute adds play, pause, and volume controls.
  • The <source> tag specifies the audio file to play.
  • We include a fallback message for browsers that don't support the <audio> element.

Creating a Custom Audio Player

Now, let's create a more customized audio player. We'll use HTML, CSS, and JavaScript to build this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Audio Player</title>
    <style>
        #custom-player {
            width: 300px;
            padding: 20px;
            background-color: #f0f0f0;
            border-radius: 10px;
        }
        #play-pause-btn {
            width: 100px;
            height: 30px;
        }
        #seek-bar {
            width: 100%;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="custom-player">
        <audio id="audio-element" src="your-audio-file.mp3"></audio>
        <button id="play-pause-btn">Play</button>
        <input type="range" id="seek-bar" value="0">
    </div>

    <script>
        const audio = document.getElementById('audio-element');
        const playPauseBtn = document.getElementById('play-pause-btn');
        const seekBar = document.getElementById('seek-bar');

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

        audio.addEventListener('timeupdate', () => {
            const progress = (audio.currentTime / audio.duration) * 100;
            seekBar.value = progress;
        });

        seekBar.addEventListener('input', () => {
            const time = (seekBar.value / 100) * audio.duration;
            audio.currentTime = time;
        });
    </script>
</body>
</html>

Let's break this down:

  1. We create a container <div> for our custom player.
  2. Inside, we have an <audio> element (without controls), a play/pause button, and a seek bar.
  3. In the JavaScript:
    • We toggle play/pause when the button is clicked.
    • We update the seek bar as the audio plays.
    • We allow seeking by clicking on the seek bar.

Adding a Visualizer

Now, let's add a simple visualizer to make our player more engaging. We'll use the Web Audio API for this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Player with Visualizer</title>
    <style>
        #custom-player {
            width: 300px;
            padding: 20px;
            background-color: #f0f0f0;
            border-radius: 10px;
        }
        #play-pause-btn {
            width: 100px;
            height: 30px;
        }
        #seek-bar {
            width: 100%;
            margin-top: 10px;
        }
        #visualizer {
            width: 300px;
            height: 150px;
            background-color: #000;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="custom-player">
        <audio id="audio-element" src="your-audio-file.mp3"></audio>
        <button id="play-pause-btn">Play</button>
        <input type="range" id="seek-bar" value="0">
        <canvas id="visualizer"></canvas>
    </div>

    <script>
        const audio = document.getElementById('audio-element');
        const playPauseBtn = document.getElementById('play-pause-btn');
        const seekBar = document.getElementById('seek-bar');
        const canvas = document.getElementById('visualizer');
        const ctx = canvas.getContext('2d');

        // Set up audio context
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const analyser = audioContext.createAnalyser();
        const source = audioContext.createMediaElementSource(audio);
        source.connect(analyser);
        analyser.connect(audioContext.destination);

        // Play/Pause functionality
        playPauseBtn.addEventListener('click', () => {
            if (audioContext.state === 'suspended') {
                audioContext.resume();
            }
            if (audio.paused) {
                audio.play();
                playPauseBtn.textContent = 'Pause';
            } else {
                audio.pause();
                playPauseBtn.textContent = 'Play';
            }
        });

        // Seek bar functionality
        audio.addEventListener('timeupdate', () => {
            const progress = (audio.currentTime / audio.duration) * 100;
            seekBar.value = progress;
        });

        seekBar.addEventListener('input', () => {
            const time = (seekBar.value / 100) * audio.duration;
            audio.currentTime = time;
        });

        // Visualizer
        function drawVisualizer() {
            requestAnimationFrame(drawVisualizer);

            const bufferLength = analyser.frequencyBinCount;
            const dataArray = new Uint8Array(bufferLength);
            analyser.getByteFrequencyData(dataArray);

            ctx.fillStyle = 'rgb(0, 0, 0)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            const barWidth = (canvas.width / bufferLength) * 2.5;
            let x = 0;

            for (let i = 0; i < bufferLength; i++) {
                const barHeight = dataArray[i] / 2;

                ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
                ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

                x += barWidth + 1;
            }
        }

        drawVisualizer();
    </script>
</body>
</html>

In this enhanced version:

  1. We add a <canvas> element for our visualizer.
  2. We set up an audio context and analyzer using the Web Audio API.
  3. The drawVisualizer function creates a bar graph visualization of the audio frequencies.

Local Audio Player with Playlist

Now, let's create a player that can handle multiple tracks:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Player with Playlist</title>
    <style>
        #playlist-player {
            width: 300px;
            padding: 20px;
            background-color: #f0f0f0;
            border-radius: 10px;
        }
        #play-pause-btn, #prev-btn, #next-btn {
            width: 80px;
            height: 30px;
            margin: 5px;
        }
        #seek-bar {
            width: 100%;
            margin-top: 10px;
        }
        #playlist {
            list-style-type: none;
            padding: 0;
        }
        #playlist li {
            cursor: pointer;
            padding: 5px;
        }
        #playlist li:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div id="playlist-player">
        <audio id="audio-element"></audio>
        <button id="prev-btn">Previous</button>
        <button id="play-pause-btn">Play</button>
        <button id="next-btn">Next</button>
        <input type="range" id="seek-bar" value="0">
        <ul id="playlist">
            <li data-src="song1.mp3">Song 1</li>
            <li data-src="song2.mp3">Song 2</li>
            <li data-src="song3.mp3">Song 3</li>
        </ul>
    </div>

    <script>
        const audio = document.getElementById('audio-element');
        const playPauseBtn = document.getElementById('play-pause-btn');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const seekBar = document.getElementById('seek-bar');
        const playlist = document.getElementById('playlist');
        let currentTrack = 0;

        function loadTrack(index) {
            const tracks = playlist.getElementsByTagName('li');
            if (index >= 0 && index < tracks.length) {
                currentTrack = index;
                audio.src = tracks[currentTrack].getAttribute('data-src');
                audio.load();
                playPauseBtn.textContent = 'Play';
            }
        }

        function playPause() {
            if (audio.paused) {
                audio.play();
                playPauseBtn.textContent = 'Pause';
            } else {
                audio.pause();
                playPauseBtn.textContent = 'Play';
            }
        }

        playPauseBtn.addEventListener('click', playPause);

        prevBtn.addEventListener('click', () => {
            loadTrack(currentTrack - 1);
        });

        nextBtn.addEventListener('click', () => {
            loadTrack(currentTrack + 1);
        });

        audio.addEventListener('timeupdate', () => {
            const progress = (audio.currentTime / audio.duration) * 100;
            seekBar.value = progress;
        });

        seekBar.addEventListener('input', () => {
            const time = (seekBar.value / 100) * audio.duration;
            audio.currentTime = time;
        });

        playlist.addEventListener('click', (e) => {
            if (e.target.tagName === 'LI') {
                const tracks = playlist.getElementsByTagName('li');
                loadTrack([...tracks].indexOf(e.target));
                playPause();
            }
        });

        loadTrack(0);
    </script>
</body>
</html>

In this playlist version:

  1. We create a list of tracks using an unordered list.
  2. We add previous and next buttons for navigation.
  3. The JavaScript handles loading tracks, playing/pausing, and moving between tracks.

Audio Player Methods

Here's a table of common audio player methods and their descriptions:

Method Description
play() Starts playing the audio
pause() Pauses the audio
load() Reloads the audio element
currentTime Gets or sets the current playback position in seconds
duration Gets the total duration of the audio in seconds
volume Gets or sets the volume (0.0 to 1.0)
muted Gets or sets whether the audio is muted
playbackRate Gets or sets the playback speed

And there you have it! You've now learned how to create basic and advanced HTML audio players, complete with visualizers and playlists. Remember, practice makes perfect, so don't be afraid to experiment and customize these examples to fit your needs. Happy coding, and may your web pages be filled with beautiful music!

Credits: Image by storyset

Previous Tutorial:
HTML - Web RTC
Next Tutorial:
HTML - Video Player