用 html 播放音频本地文件 [英] Play audio local file with html

问题描述

我正在尝试做一些类似this的事情.

I'm trying to do something like this.

但我不知道为什么我没有让这件事发挥作用.这是代码笔示例:

But I don't know why I'm not getting this thing work. Here it is the 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 文件，但它不会将该文件加载到浏览器中.

The source tag is receiving the base64 mp3 file, but it doesn't load the file into browser.

推荐答案

您可以直接在音频元素上设置 src 属性.小提琴

You set the src attr directly on the audio element. 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>

这篇关于用 html 播放音频本地文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！