javascript - 将音频保存到 localStorage 进行播放

我正在尝试创建一个从中提取 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 以便可以播放。

最佳答案

`localStorage` 并非用于存储此类数据。相反，您应该使用 IndexedDB API ，就是为了存储这种数据而制作的。

使用 Mozilla 的 localForage 可以高度简化索引数据库的处理。 lib，它提供了类似于 localStorage 的语法。

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

但要根据 localStorage API 的需要将文件(或 Blob)转换为字符串，您可以使用 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]);
  }