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

前端之家收集整理的这篇文章主要介绍了html5 – 用html播放音频本地文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试做像 this这样的事情.

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

  1. $('input').on('change',function(e) {
  2.  
  3. var file = e.currentTarget.files[0];
  4.  
  5. var reader = new FileReader();
  6.  
  7. reader.onload = function(e) {
  8. $('audio source').attr('src',e.target.result);
  9. }
  10.  
  11. reader.readAsDataURL(file);
  12. });

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

解决方法

您可以直接在audio元素上设置src attr. fiddle
  1. var $audio = $('#myAudio');
  2. $('input').on('change',function(e) {
  3. var target = e.currentTarget;
  4. var file = target.files[0];
  5. var reader = new FileReader();
  6. console.log($audio[0]);
  7. if (target.files && file) {
  8. var reader = new FileReader();
  9. reader.onload = function (e) {
  10. $audio.attr('src',e.target.result);
  11. $audio.play();
  12. }
  13. reader.readAsDataURL(file);
  14. }
  15. });
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. <input type="file">
  3. <audio controls id="myAudio" autoplay></audio>

猜你在找的HTML5相关文章