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

我正在使用Hls.js将视频管理到我的HTML页面中。我需要建立一个音量表，告诉用户视频的音频水平。由于我需要保持

video.mute=true

，我想知道Hls.js是否有办法从流中提取音频信息并用这些信息构建音量表。目标是在没有视频音量的情况下向用户提供反馈。

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

具体来说，您需要两个节点：

• 
  您将使用此选项将音频从媒体元素（即正在播放的视频元素HLS.js）路由到音频图

• 
  此节点将音频分块分析，提供频率数据（通过FFT）和时域数据。时域数据从主流简化而来。您可以在其上运行最小/最大值以获得值（通常为-1.0到+1.0）。您可以在可视化中使用该值

您还需要将AnalyzerNode连接到AudioContext的

destinationNode

，以便最终输出音频，因为它将从该视频元素重新路由

---

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

如果使用音频上下文，如果视频静音，您将无法访问信息，因为您将分析窗口的音频流。lucataglia询问是否可以在视频静音的情况下分析信号。@Aleoffe视频的音频输出被重定向到音频上下文。除非您专门将MediaElementAudioSourceNode连接到目标，否则它实际上将被静音。我尝试了您所说的，但如果我没有将该节点连接到目标，视频将不会播放（我单击“播放”，但光标不会移动，播放也不会开始）。随着目的地的到来，轮转开始起作用。现在，由于我不想要最后的音频，我考虑不将节点连接到目标，但它不起作用。知道为什么吗？@Aleoffe如果没有连接的东西，浏览器将优化音频上下文的流，并且基本上没有“时钟”保持音频移动。如果音频不移动，视频将无法播放，因为它必须保持同步。在源和目标之间使用设置为零的增益节点。