There is always a gap on my Audio Loop in Safari

Question

SITUATION:

It works fine on Chrome. But there is a small gap every time the "Waterfall 1" sound loops, only on Safari.

Website: http://mymindflow.com

---

WHAT I TRIED SO FAR:

1) With the HTML 5 audio element:

audio.addEventListener('timeupdate', function(){
                    var buffer = 0.44;
                    if(this.currentTime > this.duration - buffer){
                        this.currentTime = 0
                        this.play()
                    }}, false);

2) Gapless.js https://github.com/regosen/Gapless-5

3) Howler.js https://github.com/goldfire/howler.js

4) Web Audio API alone: How to seamlessly loop sound with web audio api

---

QUESTION:

How can I get rid of the gap in the audio loop in Safari ?

Answer 1

我遇到了同样的问题，并通过使用mp3以外的文件格式解决了该问题。

我也强烈建议您使用howler.js！

这是一篇详细的文章，可能会对您有所帮助：https : //www.kevssite.com/seamless-audio-looping/

在寻找解决方案时，我了解到“暂停”问题的一部分是由使用mp3作为音频文件格式引起的。显然，mp3规范中存在一个错误（或者可能是它的功能！），该错误会在音轨开始时增加几毫秒的静默时间。如果将曲目加载到诸如audacity之类的编辑器中，您会看到差距。您可以编辑音轨以删除静音，但是在重新加载时会恢复静音。我建议使用ogg格式而不是mp3，因为ogg不会在曲目的开头添加任何静音。切换到ogg格式当然可以改善，但是循环之间仍然有一个小暂停。

只是从mp3转换为ogg并不会自动消除静音。您需要将mp3加载到编辑器中，从文件开头删除空格，然后以ogg格式导出曲目。