How to Convert Raw Mp3 Binary into Blob Url and Play It in Audio Tag

How to convert a blob URL to a audio file and save it to the server

First you need a proper function to send your data. Your initial fetch approach was close, but not perfect.

Let's consider the function below. It takes in a Blob in the file parameter. This Blob will be created later in the answer. In the sendAudioFile function create a new FormData object. Append the Blob to the the formData.

Now send the formData with the POST method to your server and use the body property for the formData.

const sendAudioFile = file => {
  const formData = new FormData();
  formData.append('audio-file', file);
  return fetch('http://localhost:3000/audioUpload', {
    method: 'POST',
    body: formData
  });
};

Now to create your file you need to capture the recorded stream. Right now you are directly setting the recording to your audio element, but thats no use for you to get the recorded data.

Add an empty array inside the callback of getUserMedia and lets call it data. This array will capture all the recorded data and use it to create a Blob.

In the dataavailable event handler, push the e.data (which is the recorded data) to the data array.

Add another event listener that listens for the stop event. Whenever the recording has stopped and all data is collected, create a Blob in the stop event callback. You can specify what the MIME type of the file is to tell it's format.

Now you have your Blob with recorded data and can pass that to the sendAudioFile function which will send your Blob to the server.

navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
  // Collection for recorded data.
  let data = [];

  // Recorder instance using the stream.
  // Also set the stream as the src for the audio element.
  const recorder = new MediaRecorder(stream);
  audio.srcObject = stream;

  recorder.addEventListener('start', e => {
    // Empty the collection when starting recording.
    data.length = 0;
  });

  recorder.addEventListener('dataavailable', event => {
    // Push recorded data to collection.
    data.push(event.data);
  });

  // Create a Blob when recording has stopped.
  recorder.addEventListener('stop', () => {
    const blob = new Blob(data, { 
      'type': 'audio/mp3' 
    });
    sendAudioFile(blob);
  });

  // Start the recording.
  recorder.start();
});

Play audio from Blob in React

You can create an object URL from binary data in a blob-like format for your audio element source.

Here's a commented example, including a convenience hook:

<div id="root"></div><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="react">

const {useEffect, useMemo, useState} = React;

/**
 * This is just for the demo.
 * You seem to already have the binary data for the blob.
 */
function useBlob () {
  const [blob, setBlob] = useState();
  const [error, setError] = useState();

  useEffect(() => {
    (async () => {
      try {
        // A random doorbell audio sample I found on GitHub
        const url = 'https://raw.githubusercontent.com/prof3ssorSt3v3/media-sample-files/65dbf140bdf0e66e8373fccff580ac0ba043f9c4/doorbell.mp3';
        const response = await fetch(url);
        if (!response.ok) throw new Error(`Response not OK (${response.status})`);
        setBlob(await response.blob());
      }
      catch (ex) {
        setError(ex instanceof Error ? ex : new Error(String(ex)));
      }
    })();
  }, []);

  return {blob, error};
}

/**
 * Get an object URL for the current blob. Will revoke old URL if blob changes.
 * https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
 */
function useObjectUrl (blob) {
  const url = useMemo(() => URL.createObjectURL(blob), [blob]);
  useEffect(() => () => URL.revokeObjectURL(url), [blob]);
  return url;
}

// Use the hook and render the audio element
function AudioPlayer ({blob}) {
  const src = useObjectUrl(blob);
  return <audio controls {...{src}} />;
}

function Example () {
  const {blob, error} = useBlob();
  return (
    <div>
      <h2>Audio player using binary data</h2>
      {
        blob ? <AudioPlayer {...{blob}} />
          : error ? <div>There was an error fetching the audio file: {String(error)}</div>
          : <div>Loading audio...</div>
      }
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));

</script>

How to reconstruct audio blob from a base64 encoded String?

You're on the right track. I would create a function that converts the URI to pure binary by removing the base64 headers, and then setting that as the audio source. Using your data, this should do the trick:

function convertURIToBinary(dataURI) {  let BASE64_MARKER = ';base64,';  let base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;  let base64 = dataURI.substring(base64Index);  let raw = window.atob(base64);  let rawLength = raw.length;  let arr = new Uint8Array(new ArrayBuffer(rawLength));
  for (let i = 0; i < rawLength; i++) {    arr[i] = raw.charCodeAt(i);  }  return arr;}
let binary = convertURIToBinary(data);let blob = new Blob([binary], {  type: 'audio/ogg'});let blobUrl = URL.createObjectURL(blob);
$("#source").attr("src", blobUrl);$("#audio")[0].load(); $("#audio")[0].oncanplaythrough = $("#audio")[0].play();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><audio id="audio" controls>  <source id="source" src="" type="audio/ogg" /></audio>
<script>let data = "data:application/octet-stream;base64,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";</script>

Convert base64 audio to file

You have binary data encoded in base64 string here. First of all you need trim data url meta info. Then you can create binary buffer from base64 string and store it to file.

fs.writeFileSync('file.ogg', Buffer.from(base64data.replace('data:audio/ogg; codecs=opus;base64,', ''), 'base64'));

POST HTML5 audio data to server

Note: this answer only treats current implementations in both chrome and Firefox. All this is subject to change any time soon.

I am not sure if anything is wrong in your server-side code, but don't send binary data as string. Instead, use an FormData to send it as multipart (you'll win 30% of data + integrity).

Also, it seems that in your MediaRecorder code, you are finalizing the file at every dataavailable event. It's generally not what you want.

Currently, no browser does support recording as mp3 natively.

var mimes = ['mpeg', 'mpeg3', 'x-mpeg3', 'mp3', 'x-mpeg']console.log(mimes.some(m=>MediaRecorder.isTypeSupported('audio/'+m)));

HTML5 using src using raw binary data

A bit like inline images:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/
f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67
QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g7
7ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
    width="16" height="14" alt="embedded folder icon">

Where this works for <img>, I am far from sure that data:audio/mp3;base64, ... (or audio/ogg) would work. It is not in my HTML5 reference.

For the encoding, see JEditorPane with inline Image.