无缝循环音频 html5

IT技术 javascript html audio
2021-03-22 18:29:44

任何人都知道如何实现音频标签的无缝循环?我在想一些基于 javascript 的东西..

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

6个回答

虽然仍然不完美,但这对我有用:

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

试验缓冲区的大小以找到最适合您的

感谢您提供工作片段@shooting_sparks!有没有办法了解缓冲区的确切值是多少?谢谢
2021-04-21 18:29:44
这是一个好主意 - 感谢您的发布。毕竟还有IE11要担心。
2021-04-27 18:29:44
你的例子迄今为止效果最好。我尝试了两个库:Gapless5 和Seamless.js。Gapless 使用网络音频,然后是 HTML5 作为后备,所以它并不适用于所有情况。无缝有一个缓冲概念,但我只能让它在 Chrome 上工作。感谢分享!
2021-04-28 18:29:44
我没有让它在 .44 缓冲区中工作,我仍在玩弄它。我如何获得完美的value?
2021-05-08 18:29:44
这不使用任何库,但它是最短和最实用的。升级。
2021-05-08 18:29:44

解决方案是有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 每次播放时都会从服务器请求文件。即使它是从缓存加载,也会有延迟,直到收到音频文件的未修改标头。

唔。有趣的。我倾向于同意 xHocquet,但您的解决方案可能适用于具有短暂淡入和淡出的环境、背景音或白/粉红噪声。我怀疑即使在这些情况下它仍然可能以无法控制的方式出现故障。
2021-05-02 18:29:44
这不是一种有效的方法,因为浏览器中的毫秒不够一致或不够细化。如果浏览器由于进程负载或舍入错误而变慢,您将遇到延迟。
2021-05-11 18:29:44

是的,这是一个真正的痛苦......显然,设计元素的人既不是音乐家也不是游戏开发者 - 呵呵。

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

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

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

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

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

不幸的是,这是 HTML5 元素的弱点之一。无法保证音频会在您想要或没有延迟的情况下播放。

有两个选项值得研究:

  1. SoundManager2 - 一个很棒的库,在这里可能会有所帮助,尽管在这种情况下它将使用 Flash 播放音频;

  2. Chrome 中的Web 音频 APIFirefox 中音频数据 API - 两者都是非常新的,还没有真正准备好迎接黄金时段,但允许您执行诸如预定音频播放、循环播放等操作。

dvcs.w3.org/hg/audio/raw-file/tip/webaudio/... 是的,音频 API 正是我所追求的。似乎他们仍在敲定细节,但您可以在 chrome 和 webkit 中使用一些hackery。
2021-05-05 18:29:44
最新的 webaudio api 是:webaudio.github.io/web-audio-api
2021-05-08 18:29:44

我正在尝试间隔执行此操作,试试这个https://github.com/Hivenfour/SeamlessLoop

使用 wav 文件为我工作,在 Chrome、Firefox 和 Opera 上测试过

这是一个很好的近似值,对我来说已经足够了。非常感谢。
2021-04-30 18:29:44
虽然这在理论上可以回答问题,但最好在此处包含答案的基本部分,并提供链接以供参考。
2021-05-07 18:29:44
对我来说还不够。最终使用 Web Audio API
2021-05-09 18:29:44