如何通过函数获取 audio.duration 值 [英] how to get audio.duration value by a function

问题描述

我是我的音频播放器，我需要获取我的音轨的持续时间.我需要一个函数来获取音频的 src 并返回其持续时间.这是我正在尝试但不起作用的方法:

Im my audio player I need to get the duration of my audio track. I need a function that gets src of the audio and returns its duration. Here is what I am trying to do but does not work:

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

我尝试拆分为两个函数，但不起作用.如果是工作职能就好了.

I tried to split into two functions but it does not work. It would be great if it was as on working function.

有什么想法吗?

推荐答案

因为你依赖一个事件来触发，所以你不能在 getDuration 或 getVal 中返回值

because you're relying on an event to fire, you can't return a value in getDuration or getVal

相反，你想使用回调函数，像这样(回调)

instead, you want to use a callback function, like this (callbacks)

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

The example assume you want to put the duration into a span written like this

<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 所在的位置)

Any code that needs to "know" the length should be inside the callback function (where console.log is)

使用承诺

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' 显然可以(几乎)是你想要的任何东西

---

using Events - note 'myAudioDurationEvent' can obviously be (almost) anything you want

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 函数 - 我关于使用事件侦听器的观点更合适，例如，如果一个跨度更新了持续时间多次- 该解决方案仍然只对每个跨度执行一次，因此可以通过其他方法轻松实现

although, this can be done similarly with callback or promise by passing in a destination to a modified getDuration function in those solutions as well - my point about using event listeners was more appropriate if one span for example was updated with duration multiple times - this solution still only does each span only once, so can be achieved with the other methods just as easily

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

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

and then invoke getDuration as needed like this

var span = createOrGetSomeSpanElement();
getDuration("./audio/2.mp3", span);

createOrGetSomeSpanElement 返回要在 getDuration 函数中使用的目标元素 - 如何完成取决于您，当您在循环中创建播放列表时，我'我猜你已经创建了一些元素来接收已经创建的音频长度 - 有时很难回答一半的问题

createOrGetSomeSpanElement returns the destination element to use in the getDuration function - how this is done is up to you, seeing as you create a playlist in a loop, I'm guessing you have some element created to receive the audio length already created - it's hard to answer a half asked question sometimes

这篇关于如何通过函数获取 audio.duration 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！