Question

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

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 answer将其舍入为hh：mm：ss。

＆＃39; durationchange＆＃39;加载或更改元数据时触发。有关详情，请参阅Media Events (MDN)

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

希望这有助于某人，或者至少鼓励真正的JS大师提出更好的例行公事。

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

1 个答案: