如何在浏览器中以零间隙循环播放 mp3？答案

【问题标题】：How to loop an mp3 in a browser with zero gap?如何在浏览器中以零间隙循环播放 mp3？
【发布时间】：2011-05-03 18:03:57
【问题描述】：

我正在尝试制作一个吉他练习网站，一个关键功能是循环播放非常短的 mp3 文件（几秒钟长），两者之间的间隙绝对为零。例如，它可能是一个 4 小节长的和弦进行，我想让用户无缝地循环它。

我尝试使用带有loop 属性的HTML5 <audio> 标记。谷歌浏览器在循环之间给出了一个小的差距，但对于我的目的来说足够大是完全不可接受的。我没有测试过其他浏览器，但我相信它不会工作。

一种可能的解决方法是使用ffmpeg 流式传输与 mp3 相同的音频。但是，这会消耗大量带宽。

就我自己而言，我使用 Audacity 进行无间隙循环，但不幸的是，Audacity 没有网络版本。

那么，您知道如何在浏览器中以零间隙循环播放 mp3 吗？我更喜欢非 Flash 解决方案，但如果没有其他方法，我会使用 Flash。

编辑： 感谢您的所有建议。事实证明，Flash 可以正常工作。我在http://vmlucid.lcm.hk/~netvope/audio/flash.html 做了一个玩具演示。令我惊讶的是（我过去只将 Flash 与资源消耗和浏览器崩溃联系起来），Flash 和 ActionScript 设计得相当好并且易于使用。我的第一个 Flash 项目只用了 3 个小时 :)

【问题讨论】：

既然Flash已经死了，不知道有没有HTML5的解决方案……

标签： silverlight flash mp3 ffmpeg guitar

【解决方案1】：

看看this page。使用 Google Chrome 7 听了一会儿，我发现方法 1 运行良好，而方法 3 提供了最好的结果，虽然它有点 hack。最终，所有浏览器的工作方式都不同，尤其是在 HTML5 尚未最终确定的情况下。如果可能，您应该选择 Flash 版本，我认为它会为您提供最佳循环。

【讨论】：

可惜差距太大了。感谢您提供的信息 =)
@netvope- 看来你应该使用 Flash

【解决方案2】：

我不确定这将如何工作，但如果您知道您的循环持续了 800 毫秒 - 您可以让浏览器每 800 毫秒调用一次 play 方法......但仍然不能保证它是完美的。我认为目前浏览器本身无法提供可靠的音频循环。

setInterval(function(){
  document.getElementById("loop").play();
}, 800);

有传言说最好的方法是以最无缝的方式实现这一点，以使用多个音频标签并在它们之间交替。

【讨论】：

【解决方案3】：

在 Flash AS3 中，您可以使用 computeSpectrum() 提取声音数据，并在需要时将其提供给您的 Sound 对象（SampleDataEvent 被触发）。

【讨论】：

谢谢！我还将尝试使用 extract() 中的 ByteArrays 的 SampleDataEvents。

【解决方案4】：

或者查看这个实用程序：http://www.compuphase.com/mp3/mp3loops.htm 我在我的 flash 项目中成功地使用了它，当音乐必须不间断地循环播放时，并且 99% 的时间它都有效。它将 WAV 作为输入。
基本上它是一种 LAME mp3 编码器的前端，它使用这样的设置来防止出现间隙。它不适用于非常短的音效（我相信不到 0.5 秒）。
之后你所要做的就是使用：

var sound:Sound = new MySoundEffect();
sound.play(0, 1000);

它会循环一千次。

【讨论】：

该链接提供了有关 mp3 文件间隙的全面信息。好奇者必读！