本文介绍了为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视频搭建音量计的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!