从Blob设置音频元素来源

问题描述

我的页面上有一个音频控件，看起来像：

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

我已经看到其他地方有人这样做的例子，因此我认为它应该起作用。我没有遇到任何错误，可以逐步执行代码，以便看到每一行都被击中。 Blob的类型正确（音频/ mp3），尺寸正确，但音频控件永远无法播放。我想念什么？

解决方法

给出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>

只需设置演播室本身的src，可能是加载问题

为什么不是myAudioSource.load（）？

html html5-audio javascript