将音频保存到 localStorage 以供播放

Question

我正在尝试创建一个从中提取 mp3 文件的函数

<input type="file" id="sound" accept="audio/*"/>

并存储在 Chrome 中的 localStorage 中。 （我知道 localStorage 的大小是有限的，但我将使用的音频文件将小于 2mb。）一旦这个音频文件被存储，它将被播放：

var audio = new Audio('audioFile');
audio.play();

我还是网络开发的新手，所以任何指针都会很棒！

注意：这不是 HTML5 record audio to file 的副本。我正在尝试从我的 HDD 中获取一个预先存在的 mp3 文件并将其存储到 localStorage 以便可以播放。

Answer 1

localStorage 并不意味着存储此类数据。相反，您应该使用用于存储此类数据的IndexedDB API。

使用 Mozilla 的 localForage 库高度简化了 indexedDB 的处理，它提供了类似于 localStorage 的语法。

Fiddle _{因为 StackSnippets® 不允许访问 indexedDB 和 localStorage。}

---

但是要将文件（或 Blob）转换为字符串，根据 localStorage API 的需要，您可以使用FileReader 及其readAsDataURL() 方法，该方法将提供dataURI，可由MediaElements 直接播放.

f.onchange = e =>{
  if(f.files[0].type.indexOf('audio/') !== 0){
    console.warn('not an audio file');
    return;
    }
  const reader = new FileReader();
  reader.onload = function(){
    var str = this.result;
    // this is a string, so you can store it in localStorage, even if it's really not a good idea
    console.log(str);
    const aud = new Audio(str);
    aud.play();
    };
  reader.readAsDataURL(f.files[0]);
  }

<input type="file" id="f">

Answer 2

这不是 localStorage 的用途。 localStorage 只能存储字符串，只能容纳少量的日期。

如果你真的决心这样做，你需要：

• 将 mp3 文件加载到ArrayBuffer
• encode the ArrayBuffer into Base64
• 将 Base64 编码的字符串存储在 localStorage 中

请注意，Base64 编码通常会使源素材的大小增加约 33%。这是因为它可以接受任何类型的数据，包括二进制数据，并将其转换为与标准 ASCII 字符串兼容的 64 字符集组成的字符串。

要播放它，你需要相反

• 从 localStorage 中检索 Base64 编码的字符串
• 将 Base64 字符串解码为 ArrayBuffer
• 将 ArrayBuffer 加载到音频对象中
• 将 Audio 对象分配给 <audio> 元素

还需要注意的是，localStorage 通常只分配 5-10MB 的存储空间，具体取决于浏览器。这可以是tested here，但通常，通过使用较低的比特率对其进行编码来保持您的 mp3 文件较小，尽可能使用单声道而不是立体声声道，如果音频只是口语而不是音乐，则降低采样率。