Setting audio element source from blob

Question

I have an audio control on my page that looks something like:

<audio id="myAudio" controls>
    <source id="myAudioSource" src="https://my-site/mp3/123456" type="audio/mp3">
</audio>

This works and the mp3 gets loaded and played. However I need more control over the mp3 request so I have some javascript that fetches the mp3 and then tries to set the source that looks something like:

fetch("https://my-site/mp3/123456", { method: "GET", headers: { "my-header": "my-header-value" }})
    .then(response => response.blob())
    .then(blob => {
        const audioUrl = window.URL.createObjectURL(blob);
        myAudioSource.src = audioUrl;
        myAudio[0].load();
     })
     .catch(console.error);

I've seen examples of people doing this elsewhere so I believe it should work. I'm not getting any errors and I can step through the code so I can see every line being hit. The blob looks correct in that it's got the correct type (audio/mp3) and it's the right size but the audio control never becomes playable. What am I missing?

score 3 · Accepted Answer · answered Aug 21 '20 at 11:12

3

Given https://my-site/mp3/123456 resolves to an actual MP3 file. Also (since it's your server) why not use a relative path: /mp3/

<audio id="myAudio" controls></audio>

<script>
const EL_audio = document.querySelector("#myAudio");
fetch("/mp3/123456")
    .then(response => response.blob())
    .then(blob => {
        EL_audio.src = URL.createObjectURL(blob);
        EL_audio.load();
     })
     .catch(console.error);
</script>

answered Aug 21 '20 at 11:12

Roko C. Buljan

196,159
39
305
313

Reason for not using relative path is that it's not actually on the same site - it's complicated and out of my control. The issue I think was that I was setting the url on the source but loading on the main audio element. Still slightly confused because when I was trying to work out how to do this the examples I found were doing exactly what I was doing - I guess they didn't work either. – rcarrington Aug 21 '20 at 11:30

score 0 · Answer 2 · answered Aug 21 '20 at 11:06

0

Just set the src of the studio itself, could be a problem with load

Why not myAudioSource.load()?

answered Aug 21 '20 at 11:06

B''H Bi'ezras -- Boruch Hashem

3,665
3
33
83

Setting audio element source from blob

2 Answers2