JavaScript / HTML5 音頻：播放用戶通過 Android Chrome 中的文件選擇器加載的 mp3 文件

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

您可能想嘗試看看 Audio API 是否適合您（在 HTML5 <audio>之前存在）。 它可以直接讀取ArrayBuffer s

例如，加載WAV很簡單：

HTML：

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

腳本：

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