javascriptphpaudioblobrecording

How to save blob url data in a directory

I am working on the audio record. Now I want to save that recorded audio in our local directly. When I record audio it is returning blob URL like:

blob: http://example.com/7737-4454545-545445.

When I hit this URL it plays recorded audio. Now I am sending that blob URL from js to PHP script to save your local directory but it is not working.

How can I do that?

Solution

  • Blob URL lifetime is linked to document which created Blob URL from Blob or File object. Blob URL cannot be posted to server as reference for a Blob stored at snapshot state. See Blob URL Store.

    You can use fetch(), Response.blob() to get Blob representation of Blob URL, post FormData to server.

    // `blobURL` : `"blob:http://example.com/7737-4454545-545445"`
fetch(blobUrl).then(response => response.blob())
.then(blob => { 
  const fd = new FormData();
  fd.append("fileName", blob, "file.ext"); // where `.ext` matches file `MIME` type  
  return fetch("/path/to/server", {method:"POST", body:fd})
})
.then(response => response.ok)
.then(res => console.log(res))
.catch(err => console.log(err));