用户上传音频仅在客户端播放 javascript

Question

很简单，我只想让用户从他们的目录中选择一个音频文件，让网页只播放他们上传的音频文件。

我不想向服务器发送数据；我只希望音频文件驻留在客户端。

images 有类似的指南，但我不确定如何开始为音频做这件事？我应该使用什么API？

Answer 1

这是一个使用 Javascript 的解决方案。我在代码中添加了注释。

如果您还没有熟悉 FileReader object and the readAsDataURL 方法。

尝试在下面的代码片段中上传音频文件以查看实际效果。

//get input by id
var audioFile = document.getElementById("file")
//get source by id
var audioSource = document.getElementById("audioSource");
//get audio by id
var audioTag = document.getElementById('audio');

//apply event listener to input using the playAudio function
audioFile.addEventListener("change", function() {
  playAudio(this);
});


function playAudio(input) {
  //empty var to read file
  var reader;
  //if a file is uploaded then use FileReader to read file
  if (input.files && input.files[0]) {
    reader = new FileReader();
    //onload set the audio source with the uploaded audio
    reader.onload = function(e) {
      audioSource.setAttribute('src', e.target.result);
      //load source
      audioTag.load();
      //play source
      audioTag.play();
    }
    //read contents of of file
    reader.readAsDataURL(input.files[0]);
  }
}

<input type="file" id="file">
<audio id="audio">
  <source id="audioSource" src=""></source>
</audio>

用户上传音频仅在客户端播放 javascript

Users uploads audio to play only on client-side javascript

javascript

html

audio

client

html5-audio