如何在audio标签的src属性中使用object URL

• 修正语法错误
  你给出的Blob构造代码缺少闭合右括号，正确写法如下：

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

如果实际运行的代码也漏写括号，会导致Blob对象创建失败，后续生成的URL自然无法正常使用。

• 修正Blob构造传参格式
  Blob构造函数的第一个参数要求为数组类型，哪怕你只有一份二进制数据，也需要将其包裹在数组中传入。如果你传入的blob本身是单个二进制流、ArrayBuffer或者Uint8Array对象，直接传参会导致Blob内容异常，正确写法为：

// 此处blob为你获取到的单个二进制数据
let test = new Blob([blob], {type: 'audio/mp3'});

这是这类问题最常见的核心诱因。

• 校验音频MIME类型匹配度
  如果你的音频文件不是mp3格式，错误填写type字段也会导致播放失败。你可以先省略type参数让浏览器自动识别，也可以确认音频实际格式后填写对应MIME值，常见取值如audio/wav、audio/ogg等。

• 增加audio标签调试配置
  可以先给audio标签添加controls属性方便手动触发播放调试，同时监听audio的错误事件打印具体报错信息，缩小问题范围：

<audio src={objUrl} controls onError={(e) => console.log('播放错误', e.target.error)} />

常见报错对应排查方向：MEDIA_ERR_SRC_NOT_SUPPORTED代表资源格式不被支持，说明Blob内容本身异常或者MIME类型配置错误。

• 确认资源释放时机
  不要在音频还未完成加载时就调用URL.revokeObjectURL(objUrl)释放资源，否则会导致资源无法访问。建议在音频播放结束、或者对应组件卸载时再执行资源释放操作。

内容的提问来源于stack exchange，提问作者doobean