使用 html 播放音频本地文件答案

【问题标题】：Play audio local file with html使用 html 播放音频本地文件
【发布时间】：2016-11-10 22:32:22
【问题描述】：

我正在尝试做类似this 的事情。

但我不知道为什么我没有让这件事发挥作用。这是密码笔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文件，但它没有将文件加载到浏览器中。

【问题讨论】：

标签： html audio audio-player local-files

【解决方案1】：

<audio controls>
<source src="yoraudio.ogg" type="audio/ogg">
<source src="youraudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

如需更多帮助，请访问

This is the simplest way to play audio

【讨论】：

【解决方案2】：

您直接在音频元素上设置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>

【讨论】：

这行得通！这怎么可能？我检查过的每个来源都描述了 src 文件应该在音频标签内的源标签上，而不是在音频中。非常感谢！
有没有办法让输入允许多个文件，从而创建一个播放列表而不是一次创建一个文件？

【解决方案3】：

在 UWP 中，您可以直接播放可以从音乐库中按名称获取的文件，如下所示。只需通过在项目属性的“功能”标签中检查音乐库来获得访问音乐库的权限。

picksinglefile();
        var l = Windows.Storage.KnownFolders.musicLibrary;
        var f = localStorage.getItem("alarmname").toString();
        l.getFileAsync(f).then(function (file) {
            // storagefile file is available
            var s = window.URL.createObjectURL(file);  // its a storage file, so create URL
            player1.setAttribute("src", s);
            player1.play(); // if autoplay is false or off
        });


function picksinglefile() {
// Create the picker object and set options
var fop = new Windows.Storage.Pickers.FileOpenPicker();
fop.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.musicLibrary;
fop.fileTypeFilter.replaceAll([".mp3", ".wav"]);
fop.pickSingleFileAsync().then(function (file) {
    if (file) {
        localStorage.setItem("alarmname", file.name.toString());
    } else {
        alert("Operation Cancelled");
    }
});

【讨论】：