如何在我的 chrome 擴展程序中保存 state 的音頻 blob？

Question

我有以下 popup.js 文件，我在其中從選項卡捕獲音頻並將其存儲在 blob 中，然后將我的音頻標簽的 src URL 設置為它。 我想將此 blob 存儲在 chrome 的本地存儲中，以便即使在關閉擴展程序的彈出窗口后音頻數據仍然存在。html window。我 go 如何執行此操作？ 我嘗試使用 ArrayBuffer 將 blob 序列化為 JSON 但它似乎不是正確的方法。 如果有更好的方法請告訴我。 謝謝。

function captureTabAudio() {
  chrome.tabCapture.capture({ audio: true, video: false }, (stream) => {

    context = new AudioContext();
    const chunks = [];
    if (context.state === 'suspended') {
      context.resume();
    }
    var newStream = context.createMediaStreamSource(stream);
    newStream.connect(context.destination);

    const recorder = new MediaRecorder(stream);
    recorder.start();

    setTimeout(() => recorder.stop(), 10000);

    recorder.ondataavailable = (e) => {
      chunks.push(e.data);
    };

    recorder.onstop = (e) => {
      const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
      document.querySelector("audio").src =
        URL.createObjectURL(blob);
    };
  })
}

Answer 1

我假設當你說“Chrome 的本地存儲”時，你指的是網絡的localStorage API。如果是這樣，這將不起作用，因為“使用 localStorage 存儲的鍵和值始終采用 UTF-16 字符串格式，它使用兩個每個字符的字節數”（ MDN ）。 如果你指的是擴展平台的Storage API ，你會遇到類似的問題，因為它只支持 JSON 可序列化的值。 雖然您可能會將 ArrayBuffer 轉換為 Base64 字符串，但我不建議這樣做，因為您更有可能遇到存儲限制。

對於在本地存儲二進制數據，目前最好的選擇是使用 IndexedDB。 由於這個 API 支持結構化克隆算法，它支持更廣泛的類型集，包括 ArrayBuffer。 這里提出了一個類似的問題： Saving ArrayBuffer in IndexedDB 。