html5 – 用html播放音频本地文件

我正在尝试做像 this这样的事情.

但我不知道为什么我没有把这件事搞定.
这是codepen example：

$('input').on('change',function(e) {

  var file = e.currentTarget.files[0];

  var reader = new FileReader();

  reader.onload = function(e) {
    $('audio source').attr('src',e.target.result);
  }   

  reader.readAsDataURL(file);
});

源标记正在接收base64 mp3文件,但它不会将文件加载到浏览器中.

解决方法

您可以直接在audio元素上设置src attr. fiddle

var $audio = $('#myAudio');
$('input').on('change',function(e) {
  var target = e.currentTarget;
  var file = target.files[0];
  var reader = new FileReader();
  
  console.log($audio[0]);
   if (target.files && file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $audio.attr('src',e.target.result);
            $audio.play();
        }
        reader.readAsDataURL(file);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file">
<audio controls id="myAudio" autoplay></audio>