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

我正在使用Hls.js将视频管理到我的HTML页面中。我需要构建一个音量计，告知用户有关视频的音频电平。由于我需要保留video.muted = true，我想知道是否有任何方法可以使用Hls.js从流中提取音频信息并使用这些信息构建音量计。目标是在不开视频音量的情况下向用户提供反馈。

---

解决方案

您可以使用Web Audio API轻松完成此操作。

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

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

• AnalyserNode
  该节点对音频进行分块分析，提供频率数据(通过FFT)和时域数据。从主流简化时域数据。您可以对其运行最小/最大值以获得一个值(通常为-1.0到+1.0)。您可以在可视化中使用该值。

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

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