将音频保存到localStorage进行播放

Question

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

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

并存储在Chrome中的localStorage中.(我知道localStorage的大小有限,但我将使用的音频文件将低于2mb.)一旦存储了这个音频文件,它将被播放:

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

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

注意:这不是HTML5记录音频到文件的副本.我试图从我的硬盘驱动器中取出一个预先存在的mp3文件并将其存储到localStorage中,以便可以播放它.

Answer 1

localStorage并不意味着存储这些数据.相反,您应该使用IndexedDB API,它用于存储此类数据.

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

小提琴 _{,因为StackSnippets®不允许访问IndexedDB的也不localStorage的.}

但是,要根据localStorage API的需要将File(或Blob)转换为String,您可以使用an FileReader及其readAsDataURL()方法,该方法将提供可直接由MediaElements播放的dataURI.

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 中
• 将 ArrayBuffer 编码为 Base64
• 将 Base64 编码的字符串存储在 localStorage 中

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

要播放它，你需要相反

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

还应该注意的是，localStorage 通常只提供 5-10MB 的存储空间，具体取决于浏览器。这可以在这里测试，但通常，通过以较低的比特率编码来保持你的 mp3 文件很小，尽可能使用单声道而不是立体声通道，如果音频只是口语而不是音乐，则降低采样率。