Drag and drop a MP3 on a HTML page, let the page play it (without uploading to server)

Question

I've read a few questions/answers such as Play mp3 file after uploading it with html5 drag and drop upload but it's not exactly what I'm looking for :

I want to be able to drag and drop a MP3 on a HTML page, and then have a player (with PLAY PAUSE STOP buttons) that can instantly play the MP3 without uploading the file to server - it should be played locally for the client instead.

How to do this with JavaScript?

The only things I have tried/found is to do this with a file upload and <audio> tag.

score 0 · Answer 1 · answered May 21 '23 at 14:53

I just found the answer after some tweaking:

var audio = document.getElementById('audio');
var audioLoader = document.getElementById('audioFile');
audioLoader.addEventListener('change', (e) => {
    var reader = new FileReader();
    reader.onload = (event) => {
        audio.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
    }, false);

<input type="file" id="audioFile" />
<audio controls id="audio"></audio>

Drag and drop a MP3 on a HTML page, let the page play it (without uploading to server)

1 Answers1