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

Build a volume meter for an HLS video managed with Hls.js(为Hls.js管理的HLS视频搭建音量计)
本文介绍了为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视频搭建音量计的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)