Play AudioBuffer in existing HTML5 audio tag

1.9k Views Asked by idleberg At 12 April 2025 at 18:45

I've created a website that contains an audio-tag as well as a working drop-area for file upload.

<body>
    <audio id="myPlayer" controls>Your browser does not support the audio-tag</audio>
    <div id="dropArea"></div>
</body>

A dragged audio-file then gets converted into an ArrayBuffer and ultimately an AudioBuffer.

let audioContext = new (window.AudioContext || window.webkitAudioContext)();
let arrayBuffer = await readFileAsArrayBuffer(audioFile);

audioContext.decodeAudioData(arrayBuffer, buf => {
    console.log(buf);
});

The AudioBuffer can then be played in the function like this:

playSound(buffer) => {
  let source = context.createBufferSource();

  source.buffer = buffer;
  source.connect(context.destination);
  source.start(0);
}

All of the above works fine, but that's not what I'm after.

I want to the AudioBuffer to be played and controlled in the audio-player in my HTML instead. How can this be done?

Original Q&A

There are 1 best solutions below

idleberg On 29 March 2021 at 07:58 BEST ANSWER

To answer my own question, a data URL needs to be created from the uploaded file.

The readAsDataURL method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.

Example

// Helper Function
function readAsDataURL(file) {
  return new Promise((resolve, reject) => {
    if (file instanceof File) {
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(file);
    } else {
      reject(new Error("This type of object is not supported"));
    }
  });
}

// Set URL for audio player
(async () => {
  const url = await readAsDataURL(event.dataTransfer.files[0]);
  const audioElement = document.querySelector("#audio-player");

  audioElement.src = url;
})();

Play AudioBuffer in existing HTML5 audio tag

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML5-AUDIO

Related Questions in WEB-AUDIO-API

Related Questions in AUDIOBUFFER

Trending Questions

Popular # Hahtags

Popular Questions