Установка источника аудиоэлемента из большого двоичного объекта

Question

На моей странице есть элемент управления звуком, который выглядит примерно так:

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

Это работает, и mp3 загружается и воспроизводится. Однако мне нужен больший контроль над mp3-запросом, поэтому у меня есть JavaScript, который извлекает mp3, а затем пытается установить источник, который выглядит примерно так:

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);

Я видел примеры, когда люди делали это в других местах, поэтому считаю, что это должно сработать. Я не получаю никаких ошибок и могу пошагово просмотреть код, чтобы видеть каждую попавшуюся строку. Капля выглядит правильно в том смысле, что она имеет правильный тип (аудио /mp3) и правильный размер, но элемент управления звуком никогда не становится воспроизводимым. Что мне не хватает?

Answer 1

Данный https://my-site/mp3/123456преобразуется в фактический файл MP3. Также (поскольку это ваш сервер) почему бы не использовать относительный путь:/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>

Answer 2

Просто установите src самой студии, может быть проблема с загрузкой

Почему не myAudioSource.load()?