JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Audio Player</title>
</head>
<body class="min-h-screen flex flex-col items-center justify-center bg-gray-200">

    <div class="bg-white p-4 rounded-lg shadow-lg">
        <audio id="audio" src="https://raw.githubusercontent.com/abxlfazl/music-player-widget/main/src/assets/media/songs/2/song.mp3"></audio>

        <div class="flex items-center justify-center">
            <button id="playPause" class="mr-2">
                <i id="playIcon" class="fas fa-play"></i>Play
                <i id="pauseIcon" class="fas fa-pause hidden"></i>Pause
            </button>

            <input id="volume" type="range" min="0" max="1" step="0.1" value="1" class="w-1/3" />

            <span id="volumeIcon" class="ml-2">
                <i class="fas fa-volume-up"></i>
            </span>
        </div>

        <div class="mt-4">
            <input id="seekSlider" type="range" min="0" value="0" step="1" class="w-full" />
        </div>
    </div>

    
</body>
</html>

JavaScript

const audio = document.getElementById('audio');
        const playPauseButton = document.getElementById('playPause');
        const playIcon = document.getElementById('playIcon');
        const pauseIcon = document.getElementById('pauseIcon');
        const volumeControl = document.getElementById('volume');
        const volumeIcon = document.getElementById('volumeIcon');
        const seekSlider = document.getElementById('seekSlider');

        playPauseButton.addEventListener('click', () => {
            if (audio.paused) {
                audio.play();
                playIcon.classList.add('hidden');
                pauseIcon.classList.remove('hidden');
            } else {
                audio.pause();
                playIcon.classList.remove('hidden');
                pauseIcon.classList.add('hidden');
            }
        });

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

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

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

        const updateVolumeIcon = () => {
            if (audio.volume === 0) {
                volumeIcon.innerHTML = '<i class="fas fa-volume-mute"></i>';
            } else if (audio.volume < 0.5) {
                volumeIcon.innerHTML = '<i class="fas fa-volume-down"></i>';
            } else {
                volumeIcon.innerHTML = '<i class="fas fa-volume-up"></i>';
            }
        };