JavaScript/HTML5 音频 : play mp3 file loaded by user via file selector in Android Chrome

Question

我正在尝试创建一个网站，用户可以在其中从他们的 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);
   }
   

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

Answer 1

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

例如，加载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