播放存储为 blob 的 MP3 文件答案

【问题标题】：Play MP3 file stored as blob播放存储为 blob 的 MP3 文件
【发布时间】：2019-07-31 08:17:40
【问题描述】：

简单地说，我想在 Firefox 中播放一个 blob MP3 文件。

我可以访问 blob 本身：blob（使用 mime 类型 audio/mpeg3 切片）和它的 URL：blobURL = window.URL.createObjectURL(blob)。

我试过了：

HTML5 音频播放器：
```
<audio controls="controls">
    <source src="[blobURL]" type="audio/mp3">
</audio>
```
但我在 Firebug 中收到一条警告，告诉我 Firefox 无法读取 audio/mpeg3 类型的文件。
多个音频播放器库（SoundManager、JPlayer 等），但似乎没有一个允许将 blob URL 作为输入。

我做错了吗？或者有人知道可以从 blob 播放 MP3 文件的解决方法或库吗？

【问题讨论】：

谢谢。您是否知道任何基于您的任一解决方案的现有音频播放器？
解决方案是什么？
现在是 2014 年......你是谁，DenverCoder9！？ xkcd.com/979
这是很久以前的事了！幸运的是，Firefox 现在可以通过依赖操作系统的 MP3 解码器来play MP3 files。从那以后我没有再次对其进行测试，但我假设在 HTML5 源元素的 src 属性中提供 blob URL 现在可以正常工作（至少在 Windows 7 上）。

标签： html flash firefox mp3 blob

【解决方案1】：

这对我来说似乎很好用，虽然我使用 audio/mpeg 作为 MIME 类型：

$scope.player = new window.Audio();

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        $scope.player.src = window.URL.createObjectURL(this.response);
        $scope.player.play();
    }
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();

【讨论】：

这与使用 HTML5 音频播放器并将 blob 的 URL 传递给它几乎相同。所以它仍然依赖于支持 MP3 的浏览器/操作系统组合。
不错，干净的 Vanilla JavaScript，不过！无论如何，多亏了 Firefox 24，我想我的问题不再相关了。
感谢您提供这个不错的解决方案，代码中存在小错误。 response => this.response

【解决方案2】：

我意识到这个问题已经得到解答，而且我的发现是针对不同的浏览器 (Chrome)，但我想我会把它留在这里，以防将来有人遇到与我相同的问题。我在通过音频播放器播放 blob 文件时遇到问题，但发现删除源标签可以解决问题。所以这行不通：

<audio controls="controls">
    <source src="[blobURL]" type="audio/mp3">
</audio>

但这很好用：

<audio controls="controls" src="[blobURL]" type="audio/mp3" />

我不确定为什么一个会起作用而另一个不会，但它确实存在。希望这对其他人有用。

【讨论】：

绝对帮了我！正在拉动可能的头发，试图弄清楚为什么在转换为使用 blob 后源无法工作（出于身份验证目的）。尝试切换到这种格式，它解决了我的问题！

【解决方案3】：

尝试在 React 中播放上传的 mp3 时遇到了类似的挑战。能够根据之前在此处提供的 XHR 解决方案使其工作，但随后对其进行了调整以与 React refs 一起使用：

import {useState, useRef, useEffect} from 'react'

function FileUploadPage(){
  const [selectedFile, setSelectedFile] = useState();
  const [isFilePicked, setIsFilePicked] = useState(false);
  const myRef = useRef(null)

  const changeHandler = (event) => {
    setSelectedFile(event.target.files[0]);
    setIsFilePicked(true);
  };

  const playAudio = () => {
    myRef.current.src = window.URL.createObjectURL(selectedFile)
    myRef.current.play()
  }

  return(
    <div>
      <input type="file" name="file" onChange={changeHandler} />
        {isFilePicked ? (
          <div>
                <p>Filename: {selectedFile.name}</p>
                <p>Filetype: {selectedFile.type}</p>
                <p>Size in bytes: {selectedFile.size}</p>
                <p>
                    lastModifiedDate:{' '}
                    {selectedFile.lastModifiedDate.toLocaleDateString()}
                </p>
                <div>
                <button onClick={playAudio}>
                    <span>Play Audio</span>
                </button>
                <audio ref={myRef} id="audio-element" src="" type="audio/mp3" />
            </div>
            </div>
        ) : (
            <p>Select a file to show details</p>
        )}
    </div>
)

}

【讨论】：