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

server/2024/11/19 23:57:01/

效果

在这里插入图片描述

源码

<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.ppmy.cn/server/143325.html

相关文章

Redis 高并发缓存架构实战与性能优化

前言 在高并发场景下&#xff0c;同时操作数据库和缓存会存在数据不一致性的问题。这常常在面试时&#xff0c;面试官很喜欢问的一个问题&#xff0c;你们系统有用 Redis&#xff1f;使用Redis实现了哪些业务场景&#xff1f;如何保证数据的一致性&#xff1f; 问题 总体归纳…

(二)PyTorch简要教学

文章目录 PyTorch教学一、训练一个神经网络二、用PyTorch是怎么去做的&#xff08;一&#xff09;Dataset & DataLoader&#xff08;二&#xff09;Tensors&#xff08;1&#xff09;Tensor是什么&#xff08;2&#xff09;怎么获得Tensor&#xff08;3&#xff09;Tensor相…

react 中 useMemo Hook 作用

useMemo是一个用于优化性能的重要钩子函数。 一、缓存计算结果 1. 基本原理和语法 1.1 原理 useMemo用于在函数组件中缓存计算结果。 1.2 语法 useMemo接受两个参数&#xff1a;一个函数包含需要缓存的计算逻辑、一个依赖项数组指定哪些值的变化会触发重新计算。 import…

大数据应用开发——实时数据处理(二)

前言 大数据应用开发——实时数据采集 大数据应用开发——实时数据处理 Flink完成Kafka中的数据消费&#xff0c;将数据分发至Kafka的dwd层中 并在HBase中进行备份 大数据应用开发——数据可视化 hadoop&#xff0c;zookeeper&#xff0c;kafka&#xff0c;flink&#xff0…

网页作业9

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>服务中心</title><style>* {margin:…

[前端面试]HTML AND CSS

HTML html语义化标签的理解 是什么: 在布局页面的时候&#xff0c;根据内容的结构与含义&#xff0c;选择合适的带语义的html标签 如header&#xff0c;footer&#xff0c;nav&#xff0c;article&#xff0c;main&#xff0c;aside&#xff0c;h标签等 好处&#xff1a; 增…

【国产MCU系列】-GD32F470-直接存储器访问控制器(DMA)

直接存储器访问控制器(DMA) 文章目录 直接存储器访问控制器(DMA)1、DMA介绍2、DMA寄存器列表3、DMA的传输模式与传输操作3.1 DMA的传输模式3.2 DMA的传输操作3.3 传输完成与软件清除4、DMA的中断4.1 中断标志4.2 中断异常4.3 中断错误5、固件库的DMA相关API6、DMA示例每个嵌…

nacos开启鉴权与配置加密

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、Nacos漏洞复现 1.1.查看配置 1.2.查看用户列表 1.3.注册新用户 二、Nacos开启鉴权 三、变更配置与信息加密 1.变更配置 2.信息加密 四、增强安全性 五、常见问…