如何從 CreateObjectURL 下載 URL 並將其保存在文件夾中

Question

我正在制作一個可以錄制 5 秒音頻的網站，它可以工作，但是當 5 秒完成后，我希望音頻下載或保存在我的項目的文件夾中，這可行嗎？ 這是我的代碼：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();


    const audioChunks = [];

    mediaRecorder.addEventListener("dataavailable", event => {
      audioChunks.push(event.data);

    });

    mediaRecorder.addEventListener("stop", () => {
      const audioBlob = new Blob(audioChunks)
      const audioUrl = URL.createObjectURL(audioBlob);
      const audio = new Audio(audioUrl);
      audio.play();
    });

我想做這樣的東西

    mediaRecorder.addEventListener("stop", () => {
      const audioBlob = new Blob(audioChunks)
      const audioUrl = URL.createObjectURL(audioBlob);
      const audio = new Audio(audioUrl);
      audio.play();
      audio.save("direction-of-the-folder/") // MAKE this
    });

先感謝您：）

Answer 1

您需要有一個后端應用程序來保存文件。 例如，您可以使用 express.js，或者您可以使用 php 創建保存文件的路徑。

Answer 2

文件系統訪問 API可以提供對本地文件系統的訪問（參見教程）。 錄制的audioChunks也可以通過以下方式下載：

function download(audioChunks) {
  const a = document.createElement('a')
  a.href = URL.createObjectURL(new Blob(audioChunks))
  a.download = 'my-audio.webm'
  a.click()
}