2

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

<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)并且大小合适,但音频控件永远无法播放。我错过了什么?

4

2 回答 2

2

Givenhttps://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>

于 2020-08-21T11:12:15.073 回答
0

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

为什么不是 myAudioSource.load()?

于 2020-08-21T11:06:19.310 回答