无间隙循环音频html5

gapless looping audio html5

本文关键字：html5 音频 循环 间隙      更新时间：2023-09-26

有人知道如何实现音频标签的无间隙循环吗?我在想一些基于javascript的东西。

我有一个循环，比如1个度量，我想让它循环并保持节奏。所以我需要循环平滑/无间隙。当我简单地将"loop"设置为true时，它将延迟并且不保持节奏

虽然还不完美，但这对我来说很有效:

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()
    }
});

试验一下缓冲区的大小，找出最适合你的

解决方案是有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，通过Data URI而不是URL请求来获取音频。

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

不幸的是，这是HTML5元素的弱点之一。不能保证音频会在你想要的时候播放或没有延迟。

有两个选项值得考虑:

  1. SoundManager2 -一个伟大的库，可能会有帮助，虽然它将使用Flash播放音频在这种情况下;

  2. Web Audio API in Chrome或Audio Data API in Firefox -两者都是真正的新，并没有真正准备好黄金时间，但允许你做的事情，如预定的音频播放，循环和整个更多。

是的，这是一个真正的痛苦…显然，提出这个元素的人既不是音乐家，也不是游戏开发者。

无论如何，根据您正在做的事情，另一个可能的解决方案是创建一个MP3/OGG/wav，它是您的循环长度的几个重复。当你想要在停止播放之前只循环播放几次声音时，这就很方便了。

这方面的一个例子可能是玩家推进火箭飞船。我目前正在开发一款基于这种场景的游戏，并制作了一款带有若干推力音效循环的MP3，总播放时间约为6秒。为了最小化下载的大小，我将音频编码为32kbps -再低一点，它就会开始听起来令人难以接受的飞溅声，因为推进声主要是白噪声。

你可以猜到，我只是相信玩家不太可能持续6秒。如果他们听到了，他们会听到间隙，但我可以接受。大多数情况下，他们不会推力这么长时间，所以不会听到故障。

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

虽然这些方法适用于某些游戏场景，但却不适用于任何类型的音乐场景。YMMV .

我尝试了上面的方法，但没有成功，在我的用例中(使用Firefox 43.0)似乎都点击了。这部分是由于必须循环一个连续的音调，没有方便的休息或低点在它(我试图创建一个使用22010个样本/秒单声道。wav文件旋转汽车引擎)。

然而，我能够将我的。wav文件多次连接在一起，以生成一个没有点击的长。wav文件(除了现在仍然发生在末尾的不常见的一个)，这是因为我的原始。wav文件被精心制作成循环。

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

这在HTML5音频中还不可能实现，因为每个音频项只触发一次结束事件。

我的方法是一个令人望而生畏的方法，但它适用于环境背景音乐

假设我们的track有5.3秒

你有两个音轨的同一文件。当一个即将结束时(例如在结束前1秒- 4.3 -5.3秒)，你将其淡出(设置音量在这一秒内的位置百分比)。与此同时，第二轨开始淡出(0 -1)。你可以设置一个50ms的间隔，或者其他的，这取决于你的音频库

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

相关文章：