无缝音频循环到任意位置

时间:2013-06-17 16:07:14

标签: html5 html5-audio

我最喜欢MOD格式的一个原因是能够循环回到歌曲中的任何给定点,使其非常适合具有“介绍”后跟“主循环”的歌曲。

当然,MP3无法做到这一点。

到目前为止,我做过这样的事情:

<audio src="/path/to/song.mp3" onEnded="this.currentTime = 12.345;"></audio>

浮点值是主循环开始的时间。

虽然这有效但音频重新启动时会出现明显的暂停时间。我可以通过将目标时间设置在它应该的位置之前来减轻这种暂停的影响,因此节拍至少在时间上保持更近,但它并不是非常理想。

我能想到的主要选择是手动循环音频文件(例如,通过复制粘贴在Audacity中)以产生比最有可能需要更长的歌曲,但问题在于这将导致大量浪费的硬盘空间和带宽,并且它无法解决人们喜欢歌曲并停止长时间收听的问题。

所以我想知道是否有办法循环MP3流。如果我正确理解格式,我应该能够确定主循环开始的文件中的位置(以字节为单位)(以秒为单位),因此理论上我可以构造一个无限循环的流。但是,HTM5音频会支持这样的流吗?

1 个答案:

答案 0 :(得分:1)

每次尝试测量延迟:

function playSeamless(clip, next) {
    if(!next) {
        next = clip.cloneNode(true);
        next.controls = false;
    }

    var start = Date.now();
    clip.play();

    setTimeout(function() {
        var time = (Date.now() - start) / 1000;
        var position = clip.currentTime;
        var delay = time - position;

        setTimeout(function() {
            // Set desired currentTime on next here and adjust delay above
            playSeamless(next, clip);
        }, (clip.duration - clip.currentTime - delay * 2.35) * 1000 | 0);
    }, 200);
}

playSeamless(yourAudioClip);

它更好,但不完全准确,所以我需要调整* 2.35或将其作为减法或其他内容。