Display and play audio file selected in input JavaScript

Question

I can't find how to play an audio file that the user has just selected with an input. I have the following input :

<input type='file' id="audio-input" class="audio-input" name="audio" accept=".mp3, .wav"/>

I would like display the audio file when the user select it so he can play it. It would be something like that :

('#audio-input-0').change( function () {

    let audio =
        "<audio controls>" +
        "     <source id='audioFile' type='audio/mpeg'>" +
        "     Your browser does not support the audio element." +
        "</audio>";

    $('body').append(audio);

    $('#audioFile').attr('src', $(this).val());
});

I hope you understand what I'm trying to do, I don't really know how to explain it (maybe that's why I don't find any answers on other topics).

What you should search is how to play audio file with fileReader. I belive this is what you need but in terms of audio (same thing, reading as url and pasting to src): developer.mozilla.org/en-US/docs/Web/API/FileReader/… — extempl
– extempl, Commented Feb 28, 2019 at 19:51

zero298 · Accepted Answer · 2019-02-28 19:41:48Z

.val() doesn't actually have the file you put into the input. You need to use its files property.

Consider reading this MDN article that will demonstrate using files: Using files from web applications and this documentation on URL.createObjectURL() which you need to use in order to provide your <audio> with a src.

function changeHandler({
  target
}) {
  // Make sure we have files to use
  if (!target.files.length) return;

  // Create a blob that we can use as an src for our audio element
  const urlObj = URL.createObjectURL(target.files[0]);

  // Create an audio element
  const audio = document.createElement("audio");

  // Clean up the URL Object after we are done with it
  audio.addEventListener("load", () => {
    URL.revokeObjectURL(urlObj);
  });

  // Append the audio element
  document.body.appendChild(audio);

  // Allow us to control the audio
  audio.controls = "true";

  // Set the src and start loading the audio from the file
  audio.src = urlObj;
}

document
  .getElementById("audio-upload")
  .addEventListener("change", changeHandler);

<div><label for="audio-upload">Upload an audio file:</label></div>
<div><input id="audio-upload" type="file" /></div>

Oscar Stausholm · Accepted Answer · 2024-01-28 23:59:06Z

0

Start by setting up the html. Then get the file with an eventlistener and create a object url that is assigned as the audio source:

const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", event => {
    const objUrl = URL.createObjectURL(event.target.files[0]);
    document.getElementById("audioPlayer").src = objUrl;
});

<input type="file" id="fileInput" accept=".mp3">
<audio id="audioPlayer" controls="true"></audio>

answered Jan 28, 2024 at 23:59

Oscar Stausholm

233 bronze badges

Collectives™ on Stack Overflow

Display and play audio file selected in input JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related