Javascript 无缝循环音频 html5
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7330023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
gapless looping audio html5
提问by ndmweb
anyone have any idea how to accomplish gapless looping for the audio tag? I'm thinking something javascript based..
任何人都知道如何实现音频标签的无缝循环？我在想一些基于 javascript 的东西..
I have a loop say 1 measure and I want it to loop and stay in tempo. So I need the loop to be smooth/gapless. When i simply set "loop" to true it will lag and does not stay in tempo.
我有一个循环说 1 小节，我希望它循环并保持节奏。所以我需要循环平滑/无间隙。当我简单地将“loop”设置为 true 时，它会滞后并且不会保持节奏。
采纳答案by PeteLe
Unfortunately this is one of the weaknesses of the HTML5 element. There is no guarantee that audio will play when you want it to or without delay.
不幸的是，这是 HTML5 元素的弱点之一。无法保证音频会在您想要或没有延迟的情况下播放。
There are two options worth looking into - SoundManager2 (http://www.schillmania.com/projects/soundmanager2/) is a great library that would probably be helpful here, though it'll use Flash to play the audio in this case.
有两个选项值得研究 - SoundManager2 (http://www.schillmania.com/projects/soundmanager2/) 是一个很棒的库，在这里可能会有所帮助，尽管在这种情况下它将使用 Flash 播放音频。
The other option is to look at the Web Audio API in Chrome or the Audio Data API in Firefox. Both are really new, and not really ready for prime time yet, but allow you to do things like scheduled audio playback, looping and a whole lot more. Check out http://www.htmlfivewow.com/slide58for a bunch more info!
另一种选择是查看 Chrome 中的 Web Audio API 或 Firefox 中的 Audio Data API。两者都非常新，还没有真正准备好迎接黄金时段，但允许您执行诸如预定音频播放、循环播放等操作。查看http://www.htmlfivewow.com/slide58了解更多信息！
回答by shooting_sparks
While still not perfect, this worked for me:
虽然仍然不完美，但这对我有用：
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()
}
});
Experiment with the size of the buffer to find what works best for you
试验缓冲区的大小以找到最适合您的
回答by Dumi Jay
Solution is to have 2 instances to control the play back.
解决方案是有2个实例来控制播放。
Something like this :
像这样的事情：
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();
And if you're using SoundManager2, source the audio through a Data URI instead of an URL request.
如果您使用的是 SoundManager2，请通过数据 URI 而不是 URL 请求获取音频。
Strangely, I found that SoundManager2 request the file from the server each time it plays. Even it's loading from the cache, there will be a delay until the not-modified header is received for the audio file.
奇怪的是，我发现 SoundManager2 每次播放时都会从服务器请求文件。即使它是从缓存加载，也会有延迟，直到收到音频文件的未修改标头。
回答by Hivenfour
I'm trying to do this with intervals, try this https://github.com/Hivenfour/SeamlessLoop
我正在尝试间隔执行此操作，试试这个https://github.com/Hivenfour/SeamlessLoop
worked for me with wav files, tested on Chrome, Firefox and Opera
使用 wav 文件为我工作，在 Chrome、Firefox 和 Opera 上测试过
回答by ubugnu
I've been searching for a couple of hours for THE solution, as this was the first page I landed on, I wish to share with you a link to a JS library that seems to perfectly play a loop of audio tracks whithout any gap Gapless-5
我一直在寻找解决方案的几个小时，因为这是我登陆的第一页，我希望与您分享一个指向 JS 库的链接，该库似乎完美地播放了一个音轨循环而没有任何间隙Gapless -5
回答by andrew pate
I've tried the methods above without success, In my use case (using Firefox 43.0) all seem to click. This is due in part to having to loop a continous tone which has no handy breaks or low points in it (I'm trying to create a reving car engine using 22010 samples/sec mono .wav files).
我已经尝试了上述方法但没有成功，在我的用例中（使用 Firefox 43.0）似乎都可以点击。这部分是由于必须循环一个连续的音调，其中没有方便的中断或低点（我正在尝试使用 22010 个样本/秒的单声道 .wav 文件创建一个正在旋转的汽车引擎）。
However I am able to concatinate my .wav file together multiple times to generate a single long .wav file which has no clicks in it (except the now infrequent one that still occurs at the end), this is because my original .wav file was carefully crafted to be cyclic.
但是，我能够多次将我的 .wav 文件连接在一起以生成一个没有点击的长 .wav 文件（除了现在很少出现的最后仍然出现的），这是因为我的原始 .wav 文件是精心制作成循环。
I now plan to have several of these long files all playing continously at the same time (one for each car rpm level) and mix these signals using a gainNode (described here: http://www.html5rocks.com/en/tutorials/webaudio/intro/). This should result in a click free car engine that will sound much better than simply starting and stopping the individual .wav files from playing.
我现在计划同时连续播放几个这样的长文件（每个汽车转速级别一个）并使用 GainNode 混合这些信号（此处描述：http://www.html5rocks.com/en/tutorials/网络音频/介绍/）。这应该会产生一个无点击的汽车引擎，听起来比简单地启动和停止播放单个 .wav 文件要好得多。
回答by Bart Read
Yeah, this is a real pain... evidently whoever spec'd out the element wasn't either a musician or game developer - heh.
是的，这真的很痛苦……显然，设计出元素的人既不是音乐家也不是游戏开发者——呵呵。
Anyhow, depending on what you're doing, another possible workaround is to create an MP3/OGG/wav that is several repeats of your loop long. This comes in handy for where you want to loop a sound only a few times before you stop playing it.
无论如何，根据你在做什么，另一种可能的解决方法是创建一个 MP3/OGG/wav，它是你的循环的几次重复。这对于您只想在停止播放之前循环播放声音的地方非常有用。
An example of this might be a player thrusting in a rocket ship. I'm developing a game at the moment with just this scenario and have created an MP3 with a number of loops of the thrust sound effect, totalling about 6 seconds of playback. In order to minimise the size of the download I've encoded the audio at 32kbps - any lower and it starts to sound unacceptably splashy, since the thrust sound is largely white noise.
这方面的一个例子可能是一名玩家在火箭飞船中推进。我目前正在使用这种场景开发一款游戏，并创建了一个带有多个推力音效循环的 MP3，总共播放了大约 6 秒。为了最大限度地减少下载的大小，我将音频编码为 32kbps - 任何更低的声音都会开始听起来令人无法接受，因为推力声音主要是白噪声。
As you can guess, I'm just banking on the fact that it's very unlikely a player would thrust continuously for 6 seconds. If they do, they'll hear the gap, but I can live with that. Most of the time they won't thrust for anything like that long, so won't hear the glitch.
你可以猜到，我只是指望玩家连续推力 6 秒的可能性很小。如果他们这样做，他们会听到差距，但我可以接受。大多数情况下，他们不会推那么长时间，所以不会听到故障。
Another option I've considered is a pair of samples that fade in and out and both loop with an offset.
我考虑过的另一个选择是一对淡入淡出并且都带有偏移量的样本。
Whilst these work for the some game scenarios they almost certainly wouldn't work for any kind of music scenario. YMMV.
虽然这些适用于某些游戏场景，但它们几乎肯定不适用于任何类型的音乐场景。天啊。
回答by user151496
my approach is a daunting one, but the one that works for ambient background music
我的方法令人生畏，但适用于环境背景音乐
let's say our track has 5.3 seconds
假设我们的曲目有 5.3 秒
you have 2 audio tracks of the same file. when is one about to end (for example 1 second before ending - 4.3s-5.3s ) you fade it out (set volume by percent of position within this one second). at the same time, the second track starts fading in (0s-1s). you can do it via some 50ms interval, or something else, depending on your audio library
您有同一个文件的 2 个音轨。什么时候即将结束（例如结束前 1 秒 - 4.3s-5.3s ）您将其淡出（在这一秒内按位置的百分比设置音量）。同时，第二个音轨开始淡入（0s-1s）。您可以通过大约 50 毫秒的间隔或其他方式进行操作，具体取决于您的音频库
after the playback ends you switch a boolean variable that controls this fadein/fadeout and reverse which track will fade in and which track will fade out in the next run
播放结束后，您切换一个布尔变量，该变量控制此淡入/淡出并反转哪个轨道将在下一次运行中淡入以及哪个轨道将淡出
回答by shoaib
This is not yet possible using HTML5 audio because the ended event triggers only once per audio item.
使用 HTML5 音频尚无法实现这一点，因为对于每个音频项目，结束事件仅触发一次。
