时间戳

首页 > 解决方案 > 从 blob 设置音频元素源

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

标签： javascripthtmlhtml5-audiocreateobjecturl

解决方案

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>

推荐阅读