如何将文件加载到 html5 音频标签中

Question

如何将 <input type="file"> 标签中的音频文件加载到音频标签中？我试过了:

<input type="file" id="file"></input>
<script>
var file = document.getElementById("file");
var audio = document.createElement("audio");
audio.src = file.value;
document.write(audio)
</script>

Answer 1

    var wrap = document.getElementById("wrap");
    var file = document.getElementById("file");
    var audio = document.createElement("audio");
    file.onchange = function() {
        audio.src = file.value;
        wrap.appendChild(audio);
    };

<div id="wrap">
    <input type="file" id="file">
</div>

这是实现的思路，但是这个也实现不了，因为url上传的不是本地url，大家可以在评论区和我讨论

Answer 2

相信能满足您的需求。首先，需要通过 JavaScript 或 jQuery 绑定文件输入（如果您愿意）。您可以使用 Blob ^{browser support}

下面是一个非常基本的例子；

<input type="file" id="file"></input>
<audio id="audio" controls autoplay></audio>

我们使用 AddEventListener 绑定 #file 进行更改，如下所示

// Check for BlobURL support
var blob = window.URL || window.webkitURL;
    if (!blob) {
        console.log('Your browser does not support Blob URLs :(');
        return;           
    }

document.getElementById('file').addEventListener('change', function(event){

        consolePrint('change on input#file triggered');
        var file = this.files[0],
         fileURL = blob.createObjectURL(file);
        console.log(file);
        console.log('File name: '+file.name);
        console.log('File type: '+file.type);
        console.log('File BlobURL: '+ fileURL);
        document.getElementById('audio').src = fileURL;

});

或者另一方面，这是我创建的nice and more interactive example

<iframe style="height:600px;width:102.7%;margin:-10px;overflow:hidden;" src="//jsfiddle.net/adamazad/0oy5moph/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Answer 3

我开发了一个 es6 代码来将文件加载到音频元素中，并使用 Promise 捕获错误并在成功时解决

    //functions:

    function setSrcObject(element, f) {
    if ('srcObject' in element) {
      try {
        // eslint-disable-next-line no-param-reassign
        element.srcObject = f; // this is the new way. only safary supports muliplt inputs, it is possible to put here media streams and files and blobs, but current new browsers support only media stream so need a fallback.
      } catch (e) {
        if (e.name !== 'TypeError') throw e;
        // Avoid using this in new browsers, as it is going away.
        // eslint-disable-next-line no-param-reassign
        element.src = URL.createObjectURL(f);
      }
    }
    // eslint-disable-next-line no-param-reassign
    else element.src = URL.createObjectURL(f);
  }

  function loadAudioFile(audio, file) {
    let onloadeddataResolve;
    let onloadeddataReject;
    // once
    function onloadeddataEv() {
      onloadeddataResolve();
      audio.removeEventListener('loadeddata', onloadeddataEv);
      audio.removeEventListener('error', onerrorEv);
    }
    function onerrorEv(e) {
      onloadeddataReject(e.srcElement.error);
      audio.removeEventListener('loadeddata', onloadeddataEv);
      audio.removeEventListener('error', onerrorEv);
    }
    audio.addEventListener('loadeddata', onloadeddataEv);
    audio.addEventListener('error', onerrorEv);
    const promise = new Promise((resolve, reject) => {
      onloadeddataResolve = resolve;
      onloadeddataReject = reject;
    }); // inversion of control promise
    // try load it:
    try {
      // audio.src =  url; // = http://example.org/myfile.mp3 or .ogg
      setSrcObject(audio, file);
      audio.load();
    } catch (e) {
      audio.removeEventListener('loadeddata', onloadeddataEv);
      audio.removeEventListener('error', onerrorEv);
      onloadeddataReject(e);
    }
    return promise;
  }

//example:

let audio =  new Audio(); // create audio element
audio.autoPlay=false;
filefield.oninput=async function test() {
  try {
    const f =  filefield.files[0]; // take first file 
    await loadAudioFile(audio, f); // load the file
    await audio.play();
  } catch(e) { console.log(e.stack?e.stack:e) }
}
playpause.onclick = async () => {  if( audio.paused) await audio.play(); else await audio.pause(); };

<input type="file" id="filefield" multiple="multiple"  accept="audio/mpeg, audio/mp4, audio/ogg">
<input id="playpause" value="play pause" type="button">

此解决方案是我开发的播放列表播放器对象的一部分

https://jsfiddle.net/shimondoodkin/7zmhsg30/20/

相关解决方案，使用网络音频播放音频API

https://jsfiddle.net/shimondoodkin/251wx8ys/31/

如何将文件加载到 html5 音频标签中

How to load a file into a html5 audio tag

html

javascript

html5-audio