将音频保存到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的副本。我试图从我的硬盘驱动器中取出一个预先存在的mp3文件并将其存储到localStorage中，以便可以播放它。

Answer 1

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

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

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

但是，要根据localStorage API的需要将文件（或Blob）转换为字符串，您可以使用FileReader及其readAsDataURL()方法，该方法将提供{{3} ，可直接由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％。这是因为它可以采用任何类型的数据，包括二进制数据，并将其转换为由64字符集组成的字符串，该字符串与标准ASCII字符串兼容。

要播放它，你需要相反的

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

还应该注意，localStorage通常只有5-10MB的存储空间，具体取决于浏览器。这可以是tested here，但一般来说，通过使用较低的比特率对其进行编码来保持较小的mp3文件，尽可能使用单声道而不是立体声声道，如果音频只是说出的话而不是音乐，则降低采样率。 / p>