使用 Web 音频的本地文件将 mp3 作为 ArrayBuffer 加载答案

【问题标题】：Loading mp3 as ArrayBuffer using local file for Web Audio使用 Web 音频的本地文件将 mp3 作为 ArrayBuffer 加载
【发布时间】：2015-11-17 07:06:24
【问题描述】：

我希望加载一个 mp3 本地文件，然后使用库进行处理，我不能使用 XMLHttpRequest，然后我使用下一个代码来读取本地 mp3 文件：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body onload="carga();">
        <input id="audio_file" type="file" accept="audio/*" />
        <audio id="audio_player" />
        <script>
            function carga() {

                audio_file.onchange = function(){
                var files = this.files;
                console.log(files);
                alert(files);
                var file = URL.createObjectURL(files[0]); 
                console.log(file);
                alert(file);
                audio_player.src = file; 
                audio_player.play();
                                                };
            }
        </script>
    </body>
</html>

但是 XMLHttpRequest 返回 ArrayBuffer，而我的代码返回一个 FileList，我需要一个 ArrayBuffer 来进行下一次处理，如何将本地 mp3 文件加载为 ArrayBuffer？

【问题讨论】：

标签： javascript html audio web-audio-api arraybuffer

【解决方案1】：

在modern Browser 上，您可以使用FileReader 及其方法readAsArrayBuffer。

  document.querySelector('input').onchange = function(){
      var fileReader  = new FileReader;
      fileReader.onload = function(){
         var arrayBuffer = this.result;
         snippet.log(arrayBuffer);
         snippet.log(arrayBuffer.byteLength);
         }
      fileReader.readAsArrayBuffer(this.files[0]);

      var url = URL.createObjectURL(this.files[0]); 
      audio_player.src = url; 
      audio_player.play();
    };

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<input id="audio_file" type="file" accept="audio/*" />
<audio id="audio_player" />

【讨论】：