无缝循环音频 html5
有人知道如何实现音频标签的无缝循环吗?我正在考虑基于 javascript 的东西。
我有一个循环,比如 1 小节,我希望它循环并保持节奏。所以我需要循环平滑/无间隙。当我简单地将“循环”设置为 true 时,它会滞后并且不会保持节奏。
anyone have any idea how to accomplish gapless looping for the audio tag? I'm thinking something javascript based..
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
虽然仍然不完美,但这对我有用:
尝试缓冲区的大小以找到最适合您的方法
While still not perfect, this worked for me:
Experiment with the size of the buffer to find what works best for you
解决方案是有2个实例来控制播放。
类似这样:
如果您使用 SoundManager2,请通过数据 URI 而不是 URL 请求获取音频。
奇怪的是,我发现SoundManager2每次播放时都会向服务器请求文件。即使是从缓存加载,也会有延迟,直到收到音频文件的未修改标头。
Solution is to have 2 instances to control the play back.
Something like this :
And if you're using SoundManager2, source the audio through a Data URI instead of an URL request.
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.
不幸的是,这是 HTML5 元素的弱点之一。无法保证音频会在您需要时或无延迟地播放。
有两个选项值得研究:
SoundManager2 - 一个很棒的库,可能会尽管在本例中它将使用 Flash 来播放音频,但这里会有所帮助;
Web Audio API 或 Firefox 中的音频数据 API - 两者都是非常新的,尚未真正准备好迎接黄金时段,但允许您做一些事情比如预定的音频播放、循环等等。
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.
There are two options worth looking into:
SoundManager2 - a great library that would probably be helpful here, though it'll use Flash to play the audio in this case;
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.
是的,这真是一个痛苦......显然,指定该元素的人既不是音乐家也不是游戏开发者 - 呵呵。
无论如何,根据您正在做的事情,另一种可能的解决方法是创建一个 MP3/OGG/wav,它是您的循环的多次重复。当您只想在停止播放之前将声音循环几次时,这会很方便。
一个例子可能是玩家推进火箭飞船。我目前正在开发一个游戏,就是这个场景,并创建了一个带有多个循环的推力音效的 MP3,总共播放大约 6 秒。为了最大限度地减少下载的大小,我将音频编码为 32kbps - 任何更低的速度听起来都会令人难以接受,因为推力声主要是白噪声。
正如您所猜到的,我只是假设玩家不太可能连续推进 6 秒。如果他们这样做,他们会听到差距,但我可以忍受。大多数时候,他们不会用力推那么久,所以不会听到故障。
我考虑过的另一个选择是一对淡入和淡出的样本,并且两者都带有偏移量循环。
虽然这些适用于某些游戏场景,但它们几乎肯定不适用于任何类型的音乐场景。 YMMV。
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.
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.
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.
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.
我已经尝试了上述方法但没有成功,在我的用例(使用 Firefox 43.0)中似乎都点击了。这部分是由于必须循环一个连续的音调,其中没有方便的中断或低点(我正在尝试使用 22010 个样本/秒的单声道 .wav 文件创建一个旋转的汽车引擎)。
但是,我可以将我的 .wav 文件多次连接在一起,生成一个长的 .wav 文件,该文件中没有任何点击(除了现在在最后仍然出现的罕见点击),这是因为我的原始 .wav 文件是精心设计的循环。
我现在计划让几个这样的长文件同时连续播放(每个汽车转速级别一个)并使用增益节点混合这些信号(此处描述:http://www.html5rocks.com/en/tutorials/webaudio/intro/)。这应该会产生一个无点击的汽车引擎,其听起来比简单地启动和停止单个 .wav 文件的播放要好得多。
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).
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.
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.
使用 HTML5 音频尚无法实现这一点,因为每个音频项仅触发一次结束事件。
This is not yet possible using HTML5 audio because the ended event triggers only once per audio item.
我的方法是一种令人畏惧的方法,但适用于环境背景音乐的方法
假设我们的曲目有 5.3 秒,
您有同一文件的 2 个音轨。当一个即将结束时(例如结束前 1 秒 - 4.3s-5.3s ),您将其淡出(按这一秒内位置的百分比设置音量)。同时,第二首曲目开始淡入 (0s-1s)。您可以通过大约 50 毫秒的间隔或其他方式来完成此操作,具体取决于您的音频库,
在播放结束后,您可以切换一个布尔变量来控制此淡入/淡出,并反转在下一次运行中哪个轨道将淡入以及哪个轨道将淡出
my approach is a daunting one, but the one that works for ambient background music
let's say our track has 5.3 seconds
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
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