无间隙循环音频html5

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

是的，这是一个真正的痛苦......显然，无论是谁指定了这个元素，都不是音乐家或游戏开发者 - 呵呵。

无论如何，根据你在做什么，另一种可能的解决方法是创建一个 MP3/OGG​​/wav，它是你的循环的几次重复。这对于您只想在停止播放之前循环播放声音的地方非常有用。

这方面的一个例子可能是一名玩家在火箭飞船中推进。我目前正在使用这种场景开发一款游戏，并创建了一个带有多个推力音效循环的 MP3，总共播放了大约 6 秒。为了最大限度地减少下载的大小，我将音频编码为 32kbps - 任何更低的声音都会开始听起来令人无法接受，因为推力声音主要是白噪声。

正如您所猜测的那样，我只是指望玩家连续推力 6 秒的可能性很小。如果他们这样做，他们会听到差距，但我可以接受。大多数情况下，他们不会推那么长时间，所以不会听到故障。

我考虑过的另一个选择是一对淡入淡出并且都带有偏移量的样本。

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

Answer 4

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

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

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