Html 播放存储为blob的MP3文件

简单地说，我想在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>

，等等），但似乎都不允许blob URL作为输入

---

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

这对我来说似乎很好，尽管我使用

音频/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();

---

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

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

但这很管用：

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

---

我不知道为什么一个能工作，另一个不能，但事实就是如此。希望这对其他人有用。

在React中播放上传的MP3时遇到了类似的挑战。能够根据先前提供的XHR解决方案使其工作，但随后将其调整为与React REF一起工作：

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>
)

从'react'导入{useState，useRef，useffect}
函数FileUploadPage（）{
const[selectedFile，setSelectedFile]=useState（）；
const[isFilePicked，setIsFilePicked]=useState（false）；
常量myRef=useRef（空）
常量changeHandler=（事件）=>{
setSelectedFile（event.target.files[0]）；
setIsFilePicked（true）；
};
常量播放音频=（）=>{
myRef.current.src=window.URL.createObjectURL（selectedFile）
myRef.current.play（）
}
返回(
{是否已选择文件(
文件名：{selectedFile.name}

文件类型：{selectedFile.type}

字节大小：{selectedFile.Size}


lastModifiedDate:{'}
{selectedFile.lastModifiedDate.toLocaleDateString（）}

播放音频
) : (
选择一个文件以显示详细信息

)}
)

---

}

谢谢。你知道现有的音频播放器会基于你的解决方案吗？解决方案是什么？是2014年。。。你是谁，丹佛科德！？这是很久以前的事了！幸运的是，Firefox现在可以依靠操作系统的MP3解码器。从那以后，我再也没有测试过它，但我假设在HTML5源元素的src属性中提供blob URL现在可以很好地工作（至少在Windows 7上是这样）。这与使用HTML5音频播放器并将blob的URL传递给它几乎是一样的。因此，它仍然依赖于支持MP3的浏览器/操作系统组合。不过，漂亮而干净的香草JavaScript！不管怎样，多亏了Firefox24，我想我的问题已经不再相关了。谢谢你提供了这个很好的解决方案，代码中有一个小错误。response=>this.response对我帮助很大！在转换为使用blob（出于身份验证目的）后，Was may hair试图弄清楚为什么source无法工作。尝试切换到这种格式，它解决了我的问题！