如何从文件对话框中读取音频文件

Question

我正在创建一个网络，您可以在其中通过文件对话框上传 mp3 文件，但我不知道如何告诉网络播放用户上传的声音（？

  function importData() 
{
     let input = document.createElement('input');
     input.type = 'file';
     input.onchange = e => {
    // you can use this method to get file and perform respective operations
     var file = e.target.files[0];
     console.log(file.name);
   }
}

Answer 1

从用户那里获得文件名后，您需要获取其内容，您可以使用 FileReader 来完成。获得内容后，可以将其作为 HTML5 音频元素的 src 并播放。

这是一个简单的例子：

function getAudio() {
  const input = document.querySelector('input');
  const audio = document.querySelector('audio');
  input.type = 'file';
  input.onchange = e => {
    var file = e.target.files[0];

    var reader = new FileReader();
    reader.addEventListener('load', function(e) {
      audio.src = e.target.result;
      audio.play();
    });
    reader.readAsDataURL(file);
  }
}
getAudio();

<input>
<audio src=""></audio>