我使用Hls.js来管理视频到我的HTML页面。我需要建立一个音量计，通知用户关于视频的音频水平。由于我需要保留video.muted = true，我想知道是否有任何方法可以使用Hls.js从流中提取音频信息并使用这些信息构建音量计。我们的目标是在没有视频音量的情况下给用户一个反馈。
使用Web Audio API可以很容易地做到这一点。
具体来说，您需要两个节点:
-
MediaElementAudioSourceNode
你将使用它将音频从你的媒体元素(即HLS.js播放的视频元素)路由到音频图形。 -
AnalyserNode
该节点分析音频块，为您提供频率数据(通过FFT)和时域数据。时域数据由主流数据简化而成。您可以对其运行min/max来获得一个值(通常是-1.0到+1.0)。您可以在可视化中使用该值。
您还需要将AnalyserNode连接到AudioContext的destinationNode以最终输出音频，因为它将从该视频元素重新路由。
请注意，此解决方案并不特定于HLS。同样的方法适用于任何音频/视频元素，前提是源数据不受跨源限制的污染。考虑到HLS.js的工作方式，你不必担心这个问题，因为CORS问题已经解决了，否则它根本不会工作。