javascript - 当歌曲在 html 音频标签中重播时,如何消除间隙?

标签 javascript html html5-audio

<分区>

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

代码:

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

工作 fiddle 示例:

https://jsfiddle.net/rmwumaz7/

最佳答案

这实际上是音频标签的问题。但是,您可以尝试通过执行以下操作来尽量减少影响:

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

编辑:根据您的评论,我进行了更深入的挖掘。这是我发现的: https://github.com/Hivenfour/SeamlessLoop

这里的问题是,您需要以毫秒为单位提供正确的轨道长度(您要循环的轨道)

请看这里的 fiddle 。 https://jsbin.com/simuvoduhi/edit?html,js,output

关于javascript - 当歌曲在 html 音频标签中重播时,如何消除间隙?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36720440/

相关文章:

javascript - Angular js : how to use loop in directive

python - Flask 中的 API——返回 JSON 但 HTML 异常破坏了我的 JSON 客户端

html - 背景 .png 未在 Chrome 和 Firefox 中显示

javascript - 对于一系列图片,我希望每个图像都有不同的音频

jquery - 混响开发人员采用了哪些技术来实现跨站点播放器?

javascript - 使用 javascript 解析并显示 HTML 音频当前时间

javascript - JWT auth0 创建没有证书的 jwt

javascript - 如何将插件添加到 Bootstrap

javascript - 在 JavaScript 中验证 JSON 文件

javascript - 使用 javascript 函数对 Div 进行编号