我正在构建一个跨平台的Web应用程序,其中音频在服务器上即时生成,并且可能通过HTML5音频元素直播到浏览器客户端.在浏览器上,我将使用Javascript驱动的动画,这些动画必须与播放的音频精确同步."精确"意味着音频和动画必须在彼此之间,并且希望在250ms内(想想唇形同步).由于各种原因,我无法在服务器上进行音频和动画,并对生成的视频进行实时流式传输.
理想情况下,服务器上的音频生成和浏览器上的音频播放之间几乎没有或没有延迟,但我的理解是延迟将难以控制,并且可能在3-7秒范围内(浏览器,环境 - ,网络和月相依赖).但是,我可以处理这个问题,如果我可以在运行中精确测量实际延迟,以便我的浏览器Javascript知道何时呈现正确的动画帧.
那么,我需要精确测量我将音频传输到流媒体服务器(Icecast？)和来自扬声器主机上扬声器的音频之间的延迟.一些蓝天的可能性:
将元数据添加到音频流,并从播放音频中解析它(我知道使用标准音频元素是不可能的)
为音频添加短暂的纯静音时段,然后在浏览器上检测它们(音频元素可以产生实际的音频样本吗？)
查询服务器和浏览器的各种缓冲区深度
在Javascript中解码流式音频,然后获取元数据
有关如何做到这一点的任何想法？
如果我有 HTML5video和audio元素，是否有一种干净的方法来使它们保持同步？它们应该像包含音轨的视频文件一样，因此手动推进一个音轨应该会同时带来另一个音轨。假设这两个曲目的持续时间相同。
我想要一个可以跨浏览器工作的解决方案，但我并不特别关心它是否可以在旧版浏览器上工作。如果可能的话，最好避免使用 JavaScript。否则，一个极其简单的 JavaScript 库将是最好的——它只要求同步哪些曲目并处理其余的事情。
我研究过mediagroup ...但看起来它只适用于 Safari。我研究过audioTracks ...但用户必须在Firefox 中启用该功能。
我研究了Popcorn.js，它是一个 JavaScript 框架，似乎是为这个任务设计的......但看起来一年多来没有任何活动。除此之外，我能找到的唯一演示是将文本或幻灯片等内容同步到视频，而不是音频到视频。