任何人都知道如何实现音频标签的无缝循环?我在想一些基于 javascript 的东西..
我有一个循环说 1 小节,我希望它循环并保持节奏。所以我需要循环平滑/无间隙。当我简单地将“loop”设置为 true 时,它会滞后并且不会保持节奏。
任何人都知道如何实现音频标签的无缝循环?我在想一些基于 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,请通过数据 URI 而不是 URL 请求获取音频。
奇怪的是,我发现 SoundManager2 每次播放时都会从服务器请求文件。即使它是从缓存加载,也会有延迟,直到收到音频文件的未修改标头。
是的,这是一个真正的痛苦......显然,设计元素的人既不是音乐家也不是游戏开发者 - 呵呵。
无论如何,根据您在做什么,另一种可能的解决方法是创建一个 MP3/OGG/wav,它是循环的多次重复。这对于您想在停止播放之前只循环几次声音的地方非常有用。
这方面的一个例子可能是一名玩家在火箭飞船中推进。我目前正在使用这种场景开发一款游戏,并创建了一个带有多个推力音效循环的 MP3,总共播放了大约 6 秒。为了最小化下载的大小,我将音频编码为 32kbps - 任何更低的声音都会开始听起来令人无法接受,因为推力声音主要是白噪声。
正如您所猜测的那样,我只是指望玩家连续推力 6 秒的可能性很小。如果他们这样做,他们会听到差距,但我可以接受。大多数情况下,他们不会推那么长时间,所以不会听到故障。
我考虑过的另一个选择是一对淡入淡出并且都带有偏移量的样本。
虽然这些适用于某些游戏场景,但它们几乎肯定不适用于任何类型的音乐场景。天啊。
不幸的是,这是 HTML5 元素的弱点之一。无法保证音频会在您想要或没有延迟的情况下播放。
有两个选项值得研究:
SoundManager2 - 一个很棒的库,在这里可能会有所帮助,尽管在这种情况下它将使用 Flash 播放音频;
Chrome 中的Web 音频 API或Firefox 中的音频数据 API - 两者都是非常新的,还没有真正准备好迎接黄金时段,但允许您执行诸如预定音频播放、循环播放等操作。
我正在尝试间隔执行此操作,试试这个https://github.com/Hivenfour/SeamlessLoop
使用 wav 文件为我工作,在 Chrome、Firefox 和 Opera 上测试过