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

Build a volume meter for an HLS video managed with Hls.js(为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问题已经解决，否则它根本不会工作。

这篇关于为Hls.js管理的HLS视频搭建音量计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！