У меня есть следующий файл popup.js, в котором я захватываю звук с вкладки и сохраняю его в большом двоичном объекте, а затем устанавливаю для него URL-адрес src моего аудиотега. Я хотел бы сохранить этот BLOB-объект в локальном хранилище Chrome, чтобы аудиоданные оставались даже после закрытия окна расширения popup.html. Как мне это сделать? Я попытался сериализовать большой двоичный объект в JSON с помощью ArrayBuffer, но мне показалось, что это неправильный метод. Если есть лучший способ, пожалуйста, дайте мне знать. Спасибо.
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);
};
})
}
Я предполагаю, что когда вы говорите «локальное хранилище Chrome», вы имеете в виду веб-API localStorage . Если это так, это не сработает, потому что «Ключи и значения, хранящиеся в localStorage, всегда имеют строковый формат UTF-16, в котором используется два байта на символ» ( MDN ). Если вы имели в виду Storage API платформы расширений, у вас возникнет аналогичная проблема, потому что она поддерживает только сериализуемые значения JSON. Хотя вы потенциально можете преобразовать ArrayBuffer в строку Base64, я бы не рекомендовал это делать, так как вы, скорее всего, столкнетесь с ограничениями хранилища.
Для локального хранения двоичных данных в настоящее время лучше всего использовать IndexedDB. Поскольку этот API поддерживает алгоритм структурированного клонирования , он поддерживает гораздо более широкий набор типов, включая ArrayBuffer. Похожий вопрос задавали здесь: Сохранение ArrayBuffer в IndexedDB.
Самый простой и быстрый способ — сохранить его в IndexedDB напрямую как Blob или ArrayBuffer. Вы можете найти какую-нибудь js-библиотеку, предоставляющую упрощенный API для IndexedDB, или просто сделать ее самостоятельно, это примерно 10 строк кода.