为Hls.js托管的HLS视频搭建音量计

Question

我正在使用Hls.js来管理我的超文本标记语言页面中的视频。我需要建立一个音量计量器，告知用户关于视频的音频水平。由于我需要保留video.muted = true，我想知道是否有任何方法可以使用Hls.js从流中提取音频信息，并用这些信息构建音量计。我们的目标是给用户一个反馈，而不是开着视频的音量。

Answer 1

具体地说，您需要几个节点：

您将使用它将音频从您的媒体元素(即HLS.js正在播放的视频元素)路由到音频图形。

此节点分析分块的音频，为您提供频率数据(通过FFT)和时域数据。您可以对其运行min/max以获得一个值(通常为-1.0到+1.0)。您可以在可视化中使用该值。

您还需要将AnalyserNode连接到AudioContext的destinationNode以输出最终的音频，因为它将从该视频元素重新路由。

请注意，此解决方案并不是特定于HLS的。同样的方法适用于任何音频/视频元素，前提是源数据不受跨域限制的影响。考虑到HLS.js的工作方式，您不必担心这一点，因为CORS问题已经解决了，否则它根本不会工作。