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

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/html5/168066.html

猜你在找的HTML5相关文章