JavaScript / HTML5 音频：在 Android Chrome 中通过文件选择器播放用户加载的 mp3 文件

我正在尝试创建一个网站，用户可以从他们的 PC 或平板电脑中选择本地音频文件，并（无需将文件上传到服务器）使用 HTML5 音频标签播放该文件（用户应该单击按钮来播放它，自动播放）不需要该功能）。尽管这个浏览器应该支持所需的一切，但我无法在 Android 版本的 Chrome 中实现这一点。在桌面版 Chrome 中它可以工作。

我尝试了不同的方法来加载该文件：

1. 通过 JavaScript FileReader - 你可以在这里摆弄它：http://liveweave.com/2kOWoz

   function handleFileSelect(evt) {
       var files = evt.target.files; // FileList object
       playFile(files[0]);
   }
   
   function playFile(file) {
       var freader = new FileReader();
   
       freader.onload = function(e) {
           player.src = e.target.result;
       };
   
       freader.readAsDataURL(file);
   }
   
   player = document.getElementById('player');
   document.getElementById('files').addEventListener('change', handleFileSelect, false);
   document.getElementById('play').onclick = function(){ player.play(); };
   

2. 通过 URL.createObjectURL - 在这里编辑：http://liveweave.com/4y84XV第二个与第一个非常相似 - 只是 playFile 函数是这样的：

   function playFile(file) {
       player.src = URL.createObjectURL(file);
   }
   

这些例子有什么问题吗？有没有其他方法可以达到预期的效果？我将不胜感激任何提示或想法。谢谢。

您可能想尝试看看音频 API 是否适合您（它在 HTML5 之前就存在）<audio>）。可以直接读取ArrayBuffers

例如，加载一个WAV很简单：

HTML:

<input id="files" type="file" id="files" name="files[]" multiple />

JavaScript：

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new window.AudioContext();
var source;
function playSound(arraybuffer) {
    context.decodeAudioData(arraybuffer, function (buf) {
        source = context.createBufferSource();
        source.connect(context.destination);
        source.buffer = buf;
        source.start(0);
    });
}

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    playFile(files[0]);
}

function playFile(file) {
    var freader = new FileReader();

    freader.onload = function (e) {
        console.log(e.target.result);
        playSound(e.target.result);
    };
    freader.readAsArrayBuffer(file);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

jsfiddle：http://jsfiddle.net/SpacePineapple/8xZUD/2/

http://ericbidelman.tumblr.com/post/13471195250/web-audio-api-how-to-playing-audio-based-on-user