3

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

4

1 回答 1

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 。

加载或更改元数据时会触发“durationchange”。媒体活动 (MDN)上的更多信息

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

希望这可以帮助某人，或者至少鼓励一个真正的 JS 大师想出一个更好的例程。

于 2016-04-12T13:48:05.087 回答