javascript - Using AudioBuffer as a source for a HTMLAudioElement? - Stack Overflow

admin管理员组

文章数量:1398795

How one can use decoded AudioBuffer data to be set as a source for HTMLAudioElement?

Let us assume we have an HTMLAudioElement:

let audio = new Audio();

And we also were able to receive and decode audio data:

let context = new AudioContext();
let source = context.createBufferSource(); //this represents the audio source. We need to now populate it with binary data.

Api.getAudioFile(url).then((data) => {
  context.decodeAudioData(data, (buffer) => {
    source.buffer = buffer;
  }, null);
});

How one can use source as a source for an audio? I assume I have to create a MediaStream object for that matter, but it's not quite clear how to do it.

How one can use decoded AudioBuffer data to be set as a source for HTMLAudioElement?

Let us assume we have an HTMLAudioElement:

let audio = new Audio();

And we also were able to receive and decode audio data:

let context = new AudioContext();
let source = context.createBufferSource(); //this represents the audio source. We need to now populate it with binary data.

Api.getAudioFile(url).then((data) => {
  context.decodeAudioData(data, (buffer) => {
    source.buffer = buffer;
  }, null);
});

How one can use source as a source for an audio? I assume I have to create a MediaStream object for that matter, but it's not quite clear how to do it.

• javascript
• javascript-audio-api

Share Improve this question Follow edited Jul 18, 2018 at 20:50 Rick 4,12499 gold badges2727 silver badges3737 bronze badges asked Jul 18, 2018 at 16:37 EliasElias 8101010 silver badges2424 bronze badges 3

• Simple solution, set the src of your Audio to url. – Kaiido Commented Jul 18, 2018 at 23:34
• that's not the case if you fetch your audio from a server that requires auth token to be provided as a header. – Elias Commented Jul 19, 2018 at 10:02
• Then make a Blob from your downloaded ArrayBuffer and set your audio src to a blobURI pointing to this Blob: .then(data=>audio.src =URL.createObjectURL(new Blob([data]))) – Kaiido Commented Jul 19, 2018 at 10:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The easiest solution is obviously to set the src of your AudioElement to the url you are fetching the data from.

In your case, it seems it's not that easy (because you need some credentials to passed along the request), in that case, if you can, make your response a Blob instead of an ArrayBuffer, and then simply set your AudioElement's src to a blobURI you'd have created from this Blob.

const audio = document.querySelector('audio');
const url = "https://dl.dropboxusercontent./s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3";

fetch(url)
  .then(r => r.blob()) // request as Blob
  .then(blob => audio.src = URL.createObjectURL(blob))

<audio controls></audio>

And if you can't modify your request, or just need that ArrayBuffer e.g for the web audio context, then simply create a Blob from it:

const audio = document.querySelector('audio');
const url = "https://dl.dropboxusercontent./s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3";

fetch(url)
  .then(r => r.arrayBuffer()) // request as ArrayBuffer
  .then(buffer => {
    audio.src = URL.createObjectURL(new Blob([buffer]));
    const ctx = new AudioContext();
    return ctx.decodeAudioData(buffer);
  })
  .then(console.log);

<audio controls></audio>

本文标签： javascriptUsing AudioBuffer as a source for a HTMLAudioElementStack Overflow