Question

任何人都知道如何为音频标签实现无间隙循环？我在想基于javascript的东西......

我有一个循环说1度量，我希望它循环并保持节奏。所以我需要循环平滑/无间隙。当我简单地将“循环”设置为真时，它将滞后并且不会保持速度。

Answer 1

虽然仍然不完美，但这对我有用：

var audio_file = new Audio('whatever.mp3')
audio_file.addEventListener('timeupdate', function(){
                var buffer = .44
                if(this.currentTime > this.duration - buffer){
                    this.currentTime = 0
                    this.play()
                }}, false);

尝试缓冲区的大小以找到最适合您的方法

Answer 2

解决方案是有2个实例来控制播放。

这样的事情：

var current_player = "a";
var player_a = document.createElement("audio");
var player_b = document.createElement("audio");

player_a.src = "sounds/back_music.ogg";
player_b.src = player_a.src;

function loopIt(){
    var player = null;

    if(current_player == "a"){
        player = player_b;
        current_player = "b";
    }
    else{
        player = player_a;
        current_player = "a";
    }

    player.play();

    setTimeout(loopIt, 5333); //5333 is the length of the audio clip in milliseconds.
}

loopIt();

如果您使用的是SoundManager2，请通过数据URI而不是URL请求来获取音频。

奇怪的是，我发现SoundManager2每次播放时都会从服务器请求该文件。即使是从缓存加载，也会有延迟，直到收到音频文件的未修改标头。

Answer 3

不幸的是，这是HTML5元素的弱点之一。无论有没有延迟，都无法保证音频会播放。

有两个值得关注的选项--SoundManager2（http://www.schillmania.com/projects/soundmanager2/）是一个很棒的库，在这里可能会有所帮助，尽管它会使用Flash播放音频这种情况。

另一种选择是查看Chrome中的Web Audio API或Firefox中的Audio Data API。两者都是新的，并没有真正准备黄金时间，但允许你做的事情，如预定的音频播放，循环和更多。查看http://www.htmlfivewow.com/slide58了解更多信息！

Answer 4

我正在尝试按间隔执行此操作，请尝试此https://github.com/Hivenfour/SeamlessLoop

使用wav文件为我工作，在Chrome，Firefox和Opera上进行了测试

Answer 5

是的，这是一个真正的痛苦......显然，无论是音乐家还是游戏开发者，无论是谁都没有指出这个元素 - 嘿。

无论如何，根据您正在做的事情，另一种可能的解决方法是创建一个MP3 / OGG / wav，它可以循环多次循环。在您停止播放之前，只需几次循环播放声音就可以派上用场了。

这方面的一个例子可能是一名球员插入火箭飞船。我只是在这个场景下开发了一款游戏，并制作了一个带有多个推力音效效果循环的MP3，共播放约6秒钟。为了最大限度地减少下载的大小，我将音频编码为32kbps - 任何更低的音频都会发出不可接受的声音，因为推力声很大程度上是白噪声。

正如你可以猜到的那样，我只是假设这样一个事实，即一名球员不可能持续推进6秒。如果他们这样做，他们会听到差距，但我可以忍受这种差距。大多数时候，他们不会为那么长的时间推力，所以不会听到这个故障。

我考虑的另一个选项是一对淡入和淡出的样本，并且都有一个偏移循环。

虽然这些适用于某些游戏场景，但它们几乎肯定不会适用于任何类型的音乐场景。 YMMV。

Answer 6

我尝试过上述方法但没有成功，在我的用例中（使用Firefox 43.0）似乎都点击了。这部分是由于必须循环连续的音调，其中没有任何便利的中断或低点（我正在尝试使用22010样本/秒单声道.wav文件创建一个reving汽车引擎）。

但是我能够多次将我的.wav文件连接起来生成一个没有点击的单个长.wav文件（除了现在不常发生的那个），这是因为我原来的。 wav文件经过精心设计，是循环的。

我现在计划让这些长文件中的几个同时连续播放（每个汽车转速水平一个）并使用gainNode（这里描述：http://www.html5rocks.com/en/tutorials/webaudio/intro/）混合这些信号。这应该会产生一个无点击的汽车引擎，听起来比简单地启动和停止播放单个.wav文件要好得多。

Answer 7

我已经搜索了几个小时的解决方案，因为这是我登陆的第一页，我希望与您分享一个JS库的链接，它似乎可以完美地播放音频循环跟踪任何差距Gapless-5

Answer 8

使用HTML5音频尚无法实现这一点，因为结束事件每个音频项只触发一次。

Answer 9

我的方法令人生畏，但适用于环境背景音乐的方法

让我们说我们的赛道有5.3秒

你有2个相同文件的音轨。当一个即将结束时（例如结束前1秒 - 4.3s-5.3s）你淡出它（在这一秒内设置体积百分比）。同时，第二首曲目开始淡入（0s-1s）。您可以通过50ms的间隔或其他内容来完成，具体取决于您的音频库

播放结束后，切换一个控制此淡入淡出/淡出的布尔变量，并反转哪个曲目将淡入，哪个曲目将在下次运行中淡出

无间隙循环音频html5

9 个答案: