javascript – 如何通过函数获取audio.duration值
作者:互联网
我的音频播放器我需要获得音轨的持续时间.我需要一个函数来获取音频的src并返回其持续时间.这是我想要做的但不起作用:
function getDuration(src){
var audio = new Audio();
audio.src = "./audio/2.mp3";
var due;
return getVal(audio);
}
function getVal(audio){
$(audio).on("loadedmetadata", function(){
var val = audio.duration;
console.log(">>>" + val);
return val;
});
}
我试图分成两个功能,但它不起作用.如果它像工作功能那样会很棒.
任何想法?
解决方法:
因为您依赖于要触发的事件,所以您无法在getDuration或getVal中返回值
相反,你想使用一个回调函数,像这样(回调)
该示例假设您希望将持续时间放入这样写的跨度中
<span id="duration"></span>
function getDuration(src, cb) {
var audio = new Audio();
$(audio).on("loadedmetadata", function(){
cb(audio.duration);
});
audio.src = src;
}
getDuration("./audio/2.mp3", function(length) {
console.log('I got length ' + length);
document.getElementById("duration").textContent = length;
});
任何需要“知道”长度的代码都应该在回调函数内(console.log所在的位置)
使用Promises
function getDuration(src) {
return new Promise(function(resolve) {
var audio = new Audio();
$(audio).on("loadedmetadata", function(){
resolve(audio.duration);
});
audio.src = src;
});
}
getDuration("./audio/2.mp3")
.then(function(length) {
console.log('I got length ' + length);
document.getElementById("duration").textContent = length;
});
使用事件 – 注意’myAudioDurationEvent’显然可以(几乎)任何你想要的东西
function getDuration(src, obj) {
return new Promise(function(resolve) {
var audio = new Audio();
$(audio).on("loadedmetadata", function(){
var event = new CustomEvent("myAudioDurationEvent", {
detail: {
duration: audio.duration,
}
});
obj.dispatchEvent(event);
});
audio.src = src;
});
}
var span = document.getElementById('xyz'); // you'll need to provide better logic here
span.addEventListener('myAudioDurationEvent', function(e) {
span.textContent = e.detail.duration;
});
getDuration("./audio/2.mp3", span);
虽然,通过将目的地传递到这些解决方案中的修改后的getDuration函数,可以类似地使用回调或承诺来完成这一点 – 如果例如一个跨度更新持续多次,我对使用事件侦听器的观点更合适 – 这个解决方案仍然只是每个只跨越一次,所以可以通过其他方法轻松实现
given the new information in the comments for this answer, I believe this to be the better solution
function getDuration(src, destination) {
var audio = new Audio();
$(audio).on("loadedmetadata", function(){
destination.textContent = audio.duration;
});
audio.src = src;
}
然后根据需要调用getDuration
var span = createOrGetSomeSpanElement();
getDuration("./audio/2.mp3", span);
createOrGetSomeSpanElement返回要在getDuration函数中使用的目标元素 – 如何完成此操作由您决定,当您在循环中创建播放列表时,我猜您已创建一些元素来接收已创建的音频长度 – 这很难有时回答半问的问题
标签:javascript,jquery,audio,html5-audio 来源: https://codeday.me/bug/20191006/1858172.html