使用 html 播放音频本地文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38265242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play audio local file with html
提问by Tomás Francisco
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:
但我不知道为什么我没有让这件事发挥作用。这是 codepen示例：
$('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.
源标签正在接收 base64 mp3 文件，但它不会将该文件加载到浏览器中。
回答by oshell
You set the srcattr directly on the audio element. fiddle
您可以src直接在音频元素上设置attr。小提琴
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>回答by Mr. Panda
<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>
For more help visit
如需更多帮助，请访问
回答by pollaris
In UWP you can play a file directly that you can get by name from the Music Library as shown below. Just get permission to access the Music Library by checking the library in the "Capabilities" tag of your project properties.
在 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");
}
});
