如何使用 HTML5 音频计算一组曲目的总持续时间

Question

我正在构建一个自定义音频播放器（现在:)的计划阶段），我被困住了。我想在开始时计算我所有歌曲的总持续时间。我知道我需要加载每首歌曲才能知道它的持续时间。例如，如果我为第一首歌曲设置 src 属性，我会使用 loadmetadata 事件处理程序获取它的持续时间。但是如何获得它们的总和呢？我需要单独加载每个吗？我是否需要为列表中的每首歌曲设置音频元素的 src 属性？任何提示将不胜感激！

Answer 1

我昨天来这里是因为我需要解决这个完全相同的问题，当然，StackOverflow 是搜索结果的顶部 - 即使是这个四年前未回答的问题。 唉，我对本机 JS 解决方案的搜索被证明是徒劳的，尽管我从这里和那里尝试了几个不同的建议，所以这是我最终自己想出的......

function tracksTotalLength(Tracklist) {
    var tempAudio = document.createElement('audio'),
        L = Tracklist.length,
        i = 0, // iterator
        TTL = 0, // TotalTrackLength
        flag = true;
    // set media-type and mute (belt and braces)
    tempAudio.type = 'audio/mpeg';
    tempAudio.muted = true;
    tempAudio.addEventListener(
        'durationchange',
        function(e) {
            TTL += e.target.duration;
            /* DEBUG ONLY */ console.log('TTL:',TTL);
            recursiveUpdater(i++);
        },
        false
    );
    function recursiveUpdater(ii) {
        if (!isNaN(TTL) && ii < L) {
            tempAudio.src = Tracklist[ii];
            // fires recursiveUpdater()
            // via 'durationchange' event
        } else {
            // sometimes not all values are caught
            // and TTL = NaN, so
            // reset and have another run at it
            if (isNaN(TTL) && flag) {
                i = 0;
                flag = false;
                recursiveUpdater(i);
            } else (
                // but you can't recurse all day so
                // remove tempAudio
                tempAudio = null;
                // if it hasn't caught return false
                return (!isNaN(TTL) : TTL : false);
            }
        }
    }
    return recursiveUpdater(i);
}
var tracks = [
    'path/to/track01.mp3',
    'path/to/track02.mp3',
    'path/to/track03.mp3',
    /*...etc... */ 
];
var totalLength = tracksTotalLength(tracks);
//=> totalLength = seconds (float) or false

该函数tracksTotalLength()返回列表的总时间（以秒为单位），然后可以根据这个经典的 StackOverflow 答案将其舍入为 hh：mm：ss。

加载或更改元数据时会触发"持续时间更改"。 更多关于这一点的信息，请访问媒体活动（MDN）

在 Lubuntu 14.04 上的最新 Firefox 和 Chromium 浏览器中进行了测试，曲目列表包含 5-50 个项目。

希望这对某人有所帮助，或者至少鼓励真正的JS大师想出更好的例程。