从 blob 设置音频元素源

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

我在其他地方看到有人这样做的例子，所以我相信它应该有效。我没有收到任何错误，我可以单步执行代码，这样我就可以看到每一行都被命中了。 blob 看起来是正确的，因为它具有正确的类型 (audio/mp3) 并且大小正确，但音频控件永远无法播放。我错过了什么？

Answer 1

只设置工作室本身的src，可能是加载问题

为什么不 myAudioSource.load()？

Answer 2

鉴于 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>

从 blob 设置音频元素源

Setting audio element source from blob

html

javascript

html5-audio

createobjecturl