时间戳

首页 > 解决方案 > 如何在音频 src 中使用对象 url

reactjs - 如何在音频 src 中使用对象 url

问题描述

我正在制作一个音频播放器

<audio src={audioSrc}>

标签。

当我得到音频文件时，它是一个二进制文件（blob如下），所以我用它创建了一个 blob。

let test = new Blob(blob, {type: 'audio/mp3'};

然后创建了一个对象 url

let objUrl = URL.createObjectURL(test);

这objUrl看起来像blob:https://xxxxx，当我将此字符串传递给 时<audio src={objUrl}/>，我什么也听不到。

我想知道是否必须转换此 url 以使其在音频标签中可用。

请问我可以就这个问题得到建议吗？

标签： reactjsblobhtml5-audiocreateobjecturl

解决方案

构造函数的第一个参数Blob是一个数组。MDN 是这样描述的：

ArrayBuffer、ArrayBufferView、Blob、USVString 对象或任何此类对象的组合，将被放入 Blob 中。USVString 对象被编码为 UTF-8。

https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#parameters

也许像这样创建你的 blob 已经解决了这个问题：

let test = new Blob([ blob ], { type: 'audio/mp3' });

我能想到的另一个问题是二进制数据具有不同的 mimeType，'audio/mp3'这可能会导致音频元素放弃解码数据。

推荐阅读