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

问题描述

我正在尝试执行诸如 。

但我不知道为什么我没有得到这个东西的工作。
这里是codepen 示例：

$ b $（$'pre $ $'$'$'$'$'$'$'$'$'$'$'$'$'$' ];

var reader = new FileReader（）;

reader.onload = function（e）{
$（'audio source'）。attr（' src'，e.target.result）;
}

reader.readAsDataURL（file）;
}）;

源标签正在接收base64 mp3文件，但不会将文件加载到浏览器中。

解决方案

您直接在音频元素上设置 src attr。 小提琴

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

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);
});

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

解决方案

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屋！