Question

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

我可以访问blob本身：blob（使用mime类型audio/mpeg3切片），以及其网址：blobURL = window.URL.createObjectURL(blob)。

我尝试过：

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

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

Answer 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();

Answer 2

尝试在 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>
)

}

Answer 3

我意识到这个问题已经得到了回答，并且我的发现是针对其他浏览器（Chrome）的，但是我认为我会把这个问题留在这里，以防将来有人遇到与我相同的问题。我在通过音频播放器播放blob文件时遇到了麻烦，但是发现删除源标签可以解决问题。所以这行不通：

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

但这很好用：

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

我不确定为什么一个可以工作而另一个不能工作，但是确实可以。希望这对其他人很有用。

播放存储为blob的MP3文件

3 个答案: