当歌曲在 html 音频标签中重播时，如何消除间隙？ [复制]

Posted 2023-02-25

【中文标题】当歌曲在 html 音频标签中重播时，如何消除间隙？ [复制]

【英文标题】：How can I remove the gap when the song replays in the html audio tag? [duplicate]

【发布时间】：2016-04-19 13:50:35

【问题描述】：

当我在 html5 音频元素上使用“循环”属性时，歌曲重播时似乎存在间隙。有没有一种简单的方法可以消除这种差距？

代码：

<audio controls loop preload>
  <source src="http://www.phatdrumloops.com/audio/wav/ifineededs.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>

工作小提琴示例：

https://jsfiddle.net/rmwumaz7/

【参考方案1】：

这实际上是音频标签的问题。但是，您可以尝试通过执行以下操作来最小化影响：

var audio = new Audio('http://www.phatdrumloops.com/audio/wav/ifineededs.wav')
audio.addEventListener('timeupdate', function()
            var buffer = .1
            if(this.currentTime > this.duration - buffer)
                this.currentTime = 0
                this.play()
            , false);
 audio.play()

编辑：根据你们的cmets，我已经挖掘得更深了。这是我发现的： https://github.com/Hivenfour/SeamlessLoop

这里的问题是，您需要以毫秒为单位提供正确的曲目长度（您要循环的曲目）

在这里看到一个小提琴。 https://jsbin.com/simuvoduhi/edit?html,js,output

【讨论】：

这似乎没有帮助，我这次尝试使用 .wav 文件并结合您的解决方案：jsfiddle.net/rmwumaz7/3

嗯。老实说，我绝对没有滞后。在我的 Mac 上完美循环。

我在它们之间有 200 毫秒的延迟，几乎完美，但我仍然注意到差距。当您尝试用吉他在上面弹奏音符时，这一点很明显。

当我在 Audacity 中播放它时，我有一个完美的循环，这是我制作这个循环的程序。

@JimPeeters 稍作调整，应该可以在 javascript 中读取持续时间，如下所示：w3schools.com/jsref/prop_audio_duration.asp