（JS）如何在网页上获取设备麦克风的音量值_js获取音量大小

原创于 2024-10-24 04:13:28 发布 · 384 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

/* 处理error */
});


*实践：*  
 比如，我要做一个声音实时监测的网页，则可以这么写：

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// 获取用户的 media 信息
navigator.mediaDevices.getUserMedia({audio: true}).then((stream) => {
// 将麦克风的声音输入这个对象
mediaStreamSource = audioContext.createMediaStreamSource(stream);
// 创建一个音频分析对象，采样的缓冲区大小为4096，输入和输出都是单声道
scriptProcessor = audioContext.createScriptProcessor(4096,1,1);
// 将该分析对象与麦克风音频进行连接
mediaStreamSource.connect(scriptProcessor);
// 此举无甚效果，仅仅是因为解决 Chrome 自身的 bug
scriptProcessor.connect(audioContext.destination);
// 开始处理音频
scriptProcessor.onaudioprocess = function(e) {
// 获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
let buffer = e.inputBuffer.getChannelData(0);
// 获取缓冲区中最大的音量值
let maxVal = Math.max.apply(Math, buffer);
// 显示音量值
mystatus.innerHTML =Math.round(maxVal * 100);
};
}).catch((error) => {
mystatus.innerHTML = ‘获取音频时好像出了点问题。’ + error
});
} else {
mystatus.innerHTML = ‘不支持获取媒体接口’
}


结果：  
 采用了 ECharts图表库来显示实时地音量变化折现图。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190603171217919.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0NjgxMg==,size_16,color_FFFFFF,t_70)