Question

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

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

通过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函数是这样的：
```
function playFile(file) {
    player.src = URL.createObjectURL(file);
}
```

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

Answer 1

您可能想要尝试查看Audio API是否适合您（在HTML5 <audio>之前存在）。它可以直接阅读ArrayBuffer s

例如，加载 WAV 很简单：

HTML：

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

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/

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

Answer 2

HTML：

<input id="file" type="File" name="fileupload">
<button onclick="upload()" type="submit">Upload</button>
<div id="song"></div>

JS：

const upload = () => {
  var url;
  var file = document.querySelector("#file").files[0];
  var reader = new FileReader();
  reader.onload = function(evt) {
    url = evt.target.result;
    console.log(url);
    var sound = document.createElement("audio");
    var link = document.createElement("source");
    sound.id = "audio-player";
    sound.controls = "controls";
    link.src = url;
    sound.type = "audio/mpeg";
    sound.appendChild(link);
    document.getElementById("song").appendChild(sound);
  };
  reader.readAsDataURL(file);
};

<input id="file" type="File" name="fileupload">
	<button onclick="upload()" type="submit">Upload</button>
	<div id="song"></div>

 const upload = () => {
  var url;
  var file = document.querySelector("#file").files[0];
  var reader = new FileReader();
  reader.onload = function(evt) {
    url = evt.target.result;
    console.log(url);
    var sound = document.createElement("audio");
    var link = document.createElement("source");
    sound.id = "audio-player";
    sound.controls = "controls";
    link.src = url;
    sound.type = "audio/mpeg";
    sound.appendChild(link);
    document.getElementById("song").appendChild(sound);
  };
  reader.readAsDataURL(file);
};

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

2 个答案: