前端基础(四十一):实时获取麦克风音量

效果

在这里插入图片描述

源码

<button id="open">打开麦克风</button>
<button id="close">关闭麦克风</button><input id="range" type="range" min="0" max="100" value="0" />
let _mediaStream = null;
let _scriptProcessor = null;document.querySelector('#open').onclick = () => {navigator.mediaDevices.getUserMedia({ audio: true }).then(mediaStream => {_mediaStream = mediaStream;const audioContext = new AudioContext();const mediaStreamSource = audioContext.createMediaStreamSource(_mediaStream);const analyser = audioContext.createAnalyser();_scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);mediaStreamSource.connect(analyser);analyser.connect(_scriptProcessor);_scriptProcessor.connect(audioContext.destination);_scriptProcessor.onaudioprocess = audioProcessingEvent => {const uint8Array = new Uint8Array(analyser.frequencyBinCount);analyser.getByteFrequencyData(uint8Array);let volumeTotal = 0;uint8Array.forEach(d => volumeTotal += d);document.getElementById('range').value = volumeTotal / uint8Array.length;}});}document.querySelector('#close').onclick = () => {const audioTracks = _mediaStream.getAudioTracks();audioTracks.forEach(audioTrack => audioTrack.stop());_scriptProcessor.disconnect();document.querySelector('#range').value = 0;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/473942.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jmeter常用配置元件介绍总结之配置元件

系列文章目录 1.windows、linux安装jmeter及设置中文显示 2.jmeter常用配置元件介绍总结之安装插件 3.jmeter常用配置元件介绍总结之线程组 4.jmeter常用配置元件介绍总结之函数助手 5.jmeter常用配置元件介绍总结之取样器 6.jmeter常用配置元件介绍总结之jsr223执行pytho…

H.265流媒体播放器EasyPlayer.js视频流媒体播放器关于直播流播放完毕是否能监听到

EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;无须安装任何插件&#xff0c;起播快、延迟低、兼容性强&#xff0c;使用非常便捷。 EasyPlayer.js播放器不仅支持H.264与H.265视频编码格式&#xff0c;也能支持WebS…

《基于 PySpark 的电影推荐系统分析及问题解决》

以下是一篇关于上述代码的博客文章&#xff1a; 基于PySpark的电影推荐系统实现与分析 在当今数字化时代&#xff0c;个性化推荐系统在各个领域中都发挥着至关重要的作用&#xff0c;尤其是在娱乐行业&#xff0c;如电影推荐。本文将详细介绍如何使用PySpark构建一个简单的电…

【Java 学习】数据类型、变量、运算符、条件控制语句

Java基础语法 1. 打印 Hello World !2. 变量类和数据类型2.1 什么是变量&#xff1f;什么是数据类型&#xff1f;2.2 常用的数据类型2.3 使用变量2.4 String 类数据类型2.4.1 String 类基本概念2.4.2 String 类的使用 3. 运算符3.1 算数运算符3.2 关系运算符3.3 逻辑运算符3.4 …

性能超越Spark 13.3 倍,比某MPP整体快数十秒 | 多项性能指标数倍于主流开源引擎 | 云器科技发布性能测试报告

云器Lakehouse正式发布性能测试报告 &#x1f3c5;离线批处理&#xff1a;在复杂批处理任务中&#xff0c;云器Lakehouse相较Spark表现出13.31倍性能提升。 &#x1f3c5;即席查询&#xff1a;在交互式分析场景下&#xff0c;云器Lakehouse相较Trino表现出9.84倍性能提升。 &am…

【MySQL】RedHat8安装mysql9.1

一、下载安装包 下载地址&#xff1a;MySQL Enterprise Edition Downloads | Oracle MySQL :: MySQL Community Downloads 安装包&#xff1a;mysql-enterprise-9.1.0_el8_x86_64_bundle.tar 官方 安装文档&#xff1a;MySQL Enterprise Edition Installation Guide 二、安装…

使用IDE实现java端远程调试功能

使用IDE实现java端远程调试功能 1. 整体描述2. 前期准备3. 具体操作3.1 修改启动命令3.2 IDE配置3.3 打断点3.4 运行Debug 4. 总结 1. 整体描述 在做项目时&#xff0c;有些时候&#xff0c;需要和第三方进行调式&#xff0c;但是第三方不在一起&#xff0c;需要进行远程调试&…

蜀道山CTF<最高的山最长的河>出题记录

出这道题的最开始感觉就是,因为现在逆向的形式好多,我最开始学习的时候,经常因为很多工具,或者手段完全不知道,就很懵逼,很多师傅都出了各种类型的,我就想着给以前的"自己"出一道正常exe,慢慢调的题,为了不那么简单,我就选择了C(究极混淆,可能比rust好点),让大家无聊…

Quartus+Nios II for eclipse问题合集

由于对于FPGANIOS II 的工作需要&#xff0c;对工作过程中遇到的问题进行记录&#xff0c;持续更新。 1、BSP directory does not exist: . Stop.Nios II使用过程中遇到的一些问题2_error executing nios2-bsp-generate-files --bsp-di-CSDN博客https://blog.csdn.net/qq_39485…

AWTK VSCode 实时预览插件端口冲突的解决办法

AWTK XML UI 预览插件&#xff1a;在 vscode 中实时预览 AWTK XML UI 文件&#xff0c;在 Copilot 的帮助下&#xff0c;可以大幅提高界面的开发效率。 主要特色&#xff1a; 真实的 UI 效果。可以设置主题&#xff0c;方便查看在不同主题下界面的效果。可以设置语言&#xf…

开源项目低代码表单设计器FcDesigner获取表单的层级结构与组件数据

在使用开源项目低代码表单设计器FcDesigner时&#xff0c;获取和理解表单的层级结构非常关键。通过getDescription和getFormDescription方法&#xff0c;您可以清晰掌握表单组件的组织结构和层次关系。这些方法为操控表单的布局和配置提供了强大的支持。 源码地址: Github | G…

如何对AWS进行节省

AWS 云服务器的费用确实可能会让人感到高昂&#xff0c;尤其是在资源使用不当或配置过多的情况下。不过&#xff0c;通过一些策略的合理应用和优化&#xff0c;完全可以降低云服务的使用成本&#xff0c;实现高效节省。以下是九河云总结的几种主要的优化方法&#xff0c;帮助你…

Macmini中普通鼠标与TrackPad联动问题解决

入手了一款Macmini&#xff0c;然后接了一个普通鼠标&#xff0c;然后又买了一个TrackPad。 接下来&#xff0c;问题来了&#xff0c;这两个玩意之间是联动的&#xff0c;出现问题的地方在于鼠标滚轮对于页面内容滚动的方向上。 通常Windows系统中&#xff0c;鼠标滚轮向前&am…

基于Spring Boot+Unipp的博物馆预约小程序(协同过滤算法、二维码识别)【原创】

&#x1f388;系统亮点&#xff1a;协同过滤算法、二维码识别&#xff1b; 一.系统开发工具与环境搭建 1.系统设计开发工具 后端使用Java编程语言的Spring boot框架 项目架构&#xff1a;B/S架构 运行环境&#xff1a;win10/win11、jdk17 前端&#xff1a; 技术&#xff1a;框…

深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解

目录 深入理解 JavaScript 中的 Array.find() 方法&#xff1a;原理、性能优势与实用案例详解 一、引言&#xff1a;为什么要使用Array.find() 二、Array.find()的使用与技巧 1、基础语法 2、返回值 3、使用技巧 三、Array.find()的优势与实际应用案例 1、利用返回引用…

安全、便捷、效率高,明达边缘计算网关助力制药装备企业远程调机

随着药厂对设备运维需求的增长&#xff0c;制药装备企业需要在提高运维效率的同时&#xff0c;降低人工及差旅成本。制药装备因其数据具有高度的保密性&#xff0c;要求运维工程师提供安全可靠的远程调试方式。本案例介绍了明达技术MBox20系列5口WIFI通用网关在制药装备上的应用…

HBase 开发:使用Java操作HBase

1、实战简介 HBase和Hadoop一样&#xff0c;都是用Java进行开发的&#xff0c;本次实训我们就来学习如何使用Java编写代码来操作HBase数据库。 实验环境&#xff1a; hadoop-2.7 JDK8.0 HBase2.1.1 2、任务 1、第1关&#xff1a;创建表 package step1; import java.io.IOE…

vulhub之log4j

Apache Log4j Server 反序列化命令执行漏洞(CVE-2017-5645) 漏洞简介 Apache Log4j是一个用于Java的日志记录库,其支持启动远程日志服务器。Apache Log4j 2.8.2之前的2.x版本中存在安全漏洞。攻击者可利用该漏洞执行任意代码。 Apache Log4j 在应用程序中添加日志记录最…

【视觉SLAM】2-三维空间刚体运动的数学表示

读书笔记&#xff1a;学习空间变换的三种数学表达形式。 文章目录 1. 旋转矩阵1.1 向量运算1.2 坐标系空间变换1.3 变换矩阵与齐次坐标 2. 旋转向量和欧拉角2.1 旋转向量2.2 欧拉角 3. 四元数 1. 旋转矩阵 1.1 向量运算 对于三维空间中的两个向量 a , b ∈ R 3 a,b \in \R^3 …

Ubuntu22.04基于ROS2-Humble安装moveit2教程(亲测)

一、安装ROS2-Humble 1、参考&#xff1a;Ubuntu22.04安装ROS2-humble-CSDN博客 2、确保安装完成 source /opt/ros/humble/setup.bash 方法一&#xff1a;二进制安装 sudo apt install ros-humble-moveit* 方法二&#xff1a;安装源码编译 一、卸载二进制安装包 sudo a…