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

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

本文关键字：文件 用户 选择器 mp3 加载 播放 音频 HTML5 Chrome Android JavaScript      更新时间：2023-09-26

我正在尝试创建一个网站，用户可以从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第二个与第一个非常相似，只是播放文件功能如下：

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

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

您可能想看看Audio API是否适合您（它在HTML5 <audio>之前就存在）。可以直接读取ArrayBuffer的

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

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);
};
相关文章：