Question

我的音频播放器我需要获得音轨的持续时间。我需要一个函数来获取音频的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;
    });
}

我试图分成两个功能，但它不起作用。如果它像工作功能那样会很棒。

有什么想法吗？

Answer 1

因为您依赖某个事件来触发，所以您无法在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;
});

任何需要＆＃34;知道＆＃34;的代码长度应该在回调函数内（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函数，可以类似地使用回调或承诺来完成这一点 - 如果一个范围例如更新了持续时间多次，那么关于使用事件侦听器的观点更合适 - 这个解决方案仍然只进行一次，所以可以用其他方法轻松实现

鉴于此答案的评论中的新信息，我认为这是更好的解决方案

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函数中使用的目标元素 - 如何完成此操作取决于您，当您在循环中创建播放列表时，我猜测您已经拥有为了接收已创建的音频长度而创建的一些元素 - 有时难以回答半问题

如何通过函数

1 个答案: