在音频源中添加为 src 时，BlobUrl 不起作用答案

【问题标题】：BlobUrl not working when added as src in an audio source在音频源中添加为 src 时，BlobUrl 不起作用
【发布时间】：2020-07-25 09:58:44
【问题描述】：

我正在尝试在点击时播放音频，但不幸的是它无法正常工作响应返回一个二进制文件，我确实使用了 base64_decode(responseFromServer);

从前端（Vue）我使用 axios 并将其设置为接收带有标题 Content-Type: 'application/json' 的 responseType 'blob'

我像这样将响应传递给 axios

// inside audioPlay click method
// this is inside .then(response => )
const blobUrl = window.URL.createObjectURL(new Blob([response.data], {
      type: 'audio/wav',
}));

const audio = document.getElementById(`audio-${id}`);
const source = document.getElementById(`source-${id}`);

source.src = blobUrl;
audio.pause();
audio.load();
audio.oncanplaythrough;
audio.play();

还有模板

<v-btn icon @click="audioPlay(item.audio_id)">
    <v-icon>mdi-play</v-icon>
</v-btn>
<audio :id="'audio-' + `${item.audio_id}`" class="d-none" controls>
    <source :id="'source-'+`${item.audio_id}`" src="" type="audio/wav"/>
</audio>

但不幸的是，什么也没发生，根本没有声音。

【问题讨论】：

console.log(response.data) 输出什么？如果它真的是一个 Blob，则无需将其包装在另一个 Blob 中。您确定收到的数据是正确的音频文件吗？
是的，它返回了一个正确的 blob，我还有另一种方法可以将文件下载为 .wav 并且播放完全正常
Blob {size: 77605, type: "text/html"} size: 77605 type: "text/html" proto: Blob

标签： javascript vue.js html5-audio

【解决方案1】：

这更像是一个评论而不是一个答案，但它最终变成了一个长评论。

所以我认为您遇到的主要问题是您提出的要求。根据您在评论中添加的回复，它说 Blob 的类型是text/html。我猜是因为你想要实际的音频文件，这是不正确的。

我认为您可能需要稍微更改您传递给 axios 的请求选项。由于您正在请求音频文件，请尝试将 Content-Type 标头从 application/json 更改为 audio/mpeg。此外，通常在 axios 中请求 Blob 时，请求 responseType 设置为 'arraybuffer'，因为没有设置它，axios 会将响应作为 JSON 处理，因为这是默认设置。（参考axios config对象：https://github.com/axios/axios#request-config）

我认为你需要类似的东西：

const response = await axios.get(url, {
  responseType: 'arraybuffer',
  headers: {
    'Content-Type': 'audio/mpeg'
  }
});

// then create object URL from response...

更新 - 浏览器音频自动播放策略

此外，从您共享的代码看来，您在发出请求后尝试自动播放音频。这可能由于浏览器现在的政策而不起作用。我不知道您使用什么浏览器进行测试，但例如在 Chrome 上，您需要用户至少在声音开始播放之前与您的页面进行交互。使用音频时最好牢记这一政策。

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

【讨论】：