如何通过函数获取 audio.duration 值

Question

我是音频播放器，我需要获取音轨的持续时间。我需要一个函数来获取音频的 src 和 returns 它的持续时间。这是我正在尝试但不起作用的方法：

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

因为您依赖事件触发，所以您不能 return getDuration 或 getVal

中的值

相反，您想使用回调函数，例如 (callbacks)

该示例假设您想将持续时间放入这样写的跨度中

<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;
});

任何需要 "know" 长度的代码都应该在回调函数中（其中 console.log 是）

使用承诺

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 returns 在 getDuration 函数中使用的目标元素 - 如何完成由您决定，当您在循环中创建播放列表时，我我猜你创建了一些元素来接收已经创建的音频长度 - 有时很难回答一半的问题

如何通过函数获取 audio.duration 值

how to get audio.duration value by a function

javascript

audio

jquery

html5-audio