javascript - 为使用 Hls.js 管理的 HLS 视频构建音量计

Question

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

Answer 1

您可以使用 Web Audio API 轻松做到这一点。

具体来说，您需要几个节点:

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

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

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

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