无缝循环音频html5

任何人都有任何想法如何完成音频标签的无缝循环？我想基于JavaScript的东西..无缝循环音频html5

我有一个循环说1项措施，我希望它环路，并留在节奏。所以我需要循环平滑/无缝。当我简单地将“loop”设置为true时，它会滞后并且不会保持节奏。

来源

2011-09-07 ndmweb

虽然.ogg文件（我认为）有一个设定的帧时间，所以你会一直得到延迟，除非样本是完美的长度。这是为了什么，仅仅是出于兴趣？ – Bojangles

制作了一种鼓机，它可以从一系列音符（开始时间）自动生成一个wav文件。该示例是（应该）的确切长度的循环..当我导入到Audacity并循环它那里是无缝的。 – ndmweb

听起来像一个整洁的项目。你到目前为止尝试过什么吗？ – Bojangles

不幸的是，这是HTML5元素的弱点之一。无法保证音频将在您想要播放或无延迟时播放。

有两个选项值得研究 - SoundManager2（http://www.schillmania.com/projects/soundmanager2/）是一个很棒的图书馆，虽然它会使用Flash来播放音频在这种情况下。

另一种选择是看在Chrome网络音频API或Firefox中的音频数据API。两者都是全新的，并且还没有准备好黄金时段，但是允许你做预定的音频播放，循环播放等等。查看http://www.htmlfivewow.com/slide58了解更多信息！

来源

2011-09-22 19:20:55 PeteLe

https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#EventScheduling-section是的，音频API是我所追求的。看起来他们仍在琢磨细节，但是你可以用chrome和webkit来玩一些骇客。 – ndmweb

这尚无法使用HTML5音频，因为端事件触发每一个音频项目只有一次。

来源

2012-04-18 07:40:49 shoaib

我试图用的时间间隔要做到这一点，试试这个https://github.com/Hivenfour/SeamlessLoop

工作对我来说与wav文件，在Chrome，Firefox的测试和Opera

来源

2012-09-01 14:24:16 Hivenfour

虽然这可能在理论上回答这个问题，[这将是更可取的]（http://meta.stackexchange.com/q/8259）在这里包括答案的基本部分，并提供参考链接。 – oers

这是一个相当不错的近似值，足够接近我。非常感谢。 –

对我来说还不够。结束使用Web Audio API –

虽然还不够完善，这为我工作：

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

实验与缓冲区的大小，以找到最适合您

来源

2014-03-17 03:49:45

您的示例工作得最好。我试过两个库：Gapless5和Seamless.js。 Gapless使用网络音频，然后HTML5作为后备，所以它不适用于一切。无缝有一个缓冲概念，但我只能让它在Chrome上运行。感谢分享！ –

谢谢你，我爱你。 –

谢谢你的工作片段@shooting_sparks！有什么方法可以了解缓冲区的确切值？谢谢 –

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

来源

2014-09-19 16:18:36

这不是一种有效的方法，因为浏览器中的毫秒数不够一致或不够精细。如果浏览器由于处理负载或四舍五入错误而减速，则会遇到延迟。 – xHocquet

嗯。有趣。我倾向于同意xHocquet，但是您的解决方案可能适用于环境，垫子或白色/粉红色噪音声音，并伴有短暂淡入和淡出。即使在这种情况下，我怀疑它仍然会以不可控制的方式发生故障。 –

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

总之，这取决于你在做什么，另一种可能的解决办法是建立一个MP3/OGG/WAV这是你的循环中，重复数次长。这在您停止播放之前只需循环几次声音的位置很方便。

这方面的一个例子可能是一个球员在火箭飞船推。目前我正在开发一款游戏，只用这种场景，并且已经创建了一个带有多个推力音效循环的MP3，总共播放了大约6秒。为了最大限度地减小下载的大小，我将音频编码为32kbps - 任何音量都较低，并且开始听起来不可接受，因为推力声很大程度上是白噪声。

正如你所猜测的，我只是想知道这样一个事实，即一个玩家不可能连续持续6秒。如果他们这样做，他们会听到差距，但我可以忍受。大多数时候，他们不会推这样的事情，所以不会听到这个故障。

我考虑过的另一个选项是一对淡入淡出的样本，它们都以偏移量循环。

虽然这些工作的一些游戏场景，他们几乎肯定不会适用于任何类型的音乐场景。因人而异。

来源

2015-08-22 15:18:00

我的做法是艰巨的，但是，对于环境的背景音乐

的作品，让我们说，我们的赛道有5.3秒

你有相同的文件的2个音轨之一。当一个人即将结束时（例如结束前1秒 - 4.3s-5.3s），你将淡出它（在这一秒内将音量设置为位置的百分比）。与此同时，第二首曲目开始在（0s-1s）内消失。你可以通过一些50ms间隔或其他的东西，这取决于你的音频库

播放结束后，你切换一个布尔变量，控制这个淡入淡出和反转哪个音轨将淡入和哪个音轨将淡出在下一次运行中

来源

2015-09-29 10:12:31 user151496

html5网络音频gainNode可用于淡入/淡出。 –

我一直在寻找解决方案的几个小时，因为这是我登陆的第一个页面，我希望与您分享一个JS库的链接，它似乎完美地发挥了音轨循环没有任何差距Gapless-5

来源

2015-10-31 21:01:54 ubugnu

我试过上述方法没有成功，在我的使用案例（使用Firefox 43.0）似乎都点击。这部分原因是因为必须循环连续的音调，它没有方便的中断或低点（我试图用22010样本/秒的单声道.wav文件创建一个汽车引擎）。

但是我能够多次联合我的.wav文件来生成一个没有任何点击的长的.wav文件（除了现在很少发生的，仍然在最后发生的），这是因为我的原始.wav文件被精心制作为循环。

我现在打算让这几个长文件在同一时间连续播放（每个汽车每分钟转速一次），并使用gainNode（这里描述：http://www.html5rocks.com/en/tutorials/webaudio/intro/）混合这些信号。这应该会导致一个免费的点击式汽车引擎，听起来会比简单地启动和停止播放单个.wav文件好得多。

来源

2015-12-18 17:46:04

无缝循环音频html5

回答

相关问题