JavaScript / HTML5音频：播放用户通过Android Chrome中的文件选择器加载的mp3文件 [英] JavaScript / HTML5 audio: play mp3 file loaded by user via file selector in Android Chrome

问题描述

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

I am trying to create a site where user can select a local audio file from their PC or tablet and (without uploading the file to the server) play that file using HTML5 audio tag (user is supposed to click the button to play it, autoplay feature is not needed). I am not able to achieve this in Android version of Chrome despite the fact that this browser should support everything that is needed. In desktop version of Chrome it works.

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

I have tried different methods how to load that file:

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(); };

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

via URL.createObjectURL - edit here: http://liveweave.com/4y84XV The second one is very similar to the first one - only playFile function is like this:

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

有什么问题那些例子？有没有其他方法如何达到预期的结果？我会很感激任何提示或想法。谢谢。

What is wrong with those examples? Is there any other way how to achieve the expected result? I would appreciate any hints or ideas. Thanks.

推荐答案

您可能想尝试查看Audio API是否适合您（在HTML5 <$ c之前存在） $ C><音频> ）。它可以直接读取 ArrayBuffer s

You might want to try and see whether the Audio API works for you (which existed before the HTML5 <audio>). It can directly read ArrayBuffers

例如，加载 WAV 很简单：

HTML：

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

Javscript：

Javscript:

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/

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

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

这篇关于JavaScript / HTML5音频：播放用户通过Android Chrome中的文件选择器加载的mp3文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！