JSFiddle - React, Tailwind, and code Playground

by Colin Soderstrom

HTML

<h2>Custom Audio Player</h2>
    <input type="file" id="fileInput" accept="audio/wav">
    <br>
    <audio id="audio" controls></audio>
    <br>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <progress id="progress" value="0" max="100"></progress>

CSS

body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }
        #audioPlayer {
            width: 100%;
            max-width: 400px;
            margin: 20px auto;
        }
        input[type="file"] {
            margin-bottom: 20px;
        }
        progress {
            width: 100%;
        }

JavaScript

const fileInput = document.getElementById('fileInput');
        const audio = document.getElementById('audio');
        const playButton = document.getElementById('play');
        const pauseButton = document.getElementById('pause');
        const progress = document.getElementById('progress');
        
        fileInput.addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const objectURL = URL.createObjectURL(file);
                audio.src = objectURL;
            }
        });
        
        playButton.addEventListener('click', () => audio.play());
        pauseButton.addEventListener('click', () => audio.pause());
        
        audio.addEventListener('timeupdate', () => {
            const value = (audio.currentTime / audio.duration) * 100;
            progress.value = value;
        });