使用 html 播放音频本地文件
Play audio local file with html
我正在尝试做类似 this 的事情。
但我不知道为什么我没有让这个东西工作。
这是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);
});
source 标签正在接收 base64 mp3 文件,但它不会将该文件加载到浏览器中。
<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>
如需更多帮助,请访问
您直接在音频元素上设置 src
属性。 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>
在 UWP 中,您可以直接播放可以从音乐库中按名称获取的文件,如下所示。只需在项目属性的 "Capabilities" 标记中检查音乐库即可获得访问音乐库的权限。
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");
}
});
我正在尝试做类似 this 的事情。
但我不知道为什么我没有让这个东西工作。 这是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);
});
source 标签正在接收 base64 mp3 文件,但它不会将该文件加载到浏览器中。
<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>
如需更多帮助,请访问
您直接在音频元素上设置 src
属性。 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>
在 UWP 中,您可以直接播放可以从音乐库中按名称获取的文件,如下所示。只需在项目属性的 "Capabilities" 标记中检查音乐库即可获得访问音乐库的权限。
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");
}
});