Play MP3 file stored as blob

Question

Put simply, I'd like to play a blob MP3 file in Firefox.

I have access to both the blob itself: blob (sliced with mime type audio/mpeg3), and its URL: blobURL = window.URL.createObjectURL(blob).

I have tried with:

1. an HTML5 audio player:

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

   but I get a warning in Firebug telling me that Firefox cannot read files of type audio/mpeg3.

2. multiple audio player libraries (SoundManager, JPlayer, etc.), but none seem to allow blob URLs as input.

Am I doing it wrong? Or does anyone know a workaround or a library that can play MP3 files from blobs?

Answer 1

This seems to work fine for me, although I'm using audio/mpeg as the MIME Type:

$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

I realize this question has been answered already and that my findings are for a different browser (Chrome), but I thought I'd leave this here just in case someone in the future is having the same problem I did. I was having trouble playing a blob file through the audio player, but found that removing the source tag fixed things. So this wouldn't work:

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

But this worked fine:

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

I'm not sure why one would work and the other would not, but there it is. Hopefully this is useful to someone else down the line.

Answer 3

Had a similar challenge trying to play uploaded mp3s in React. Was able to get it working based on the previously provided XHR solution here, but then adapted it to work with 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>
)

}