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

Media​Devices​.get​User​Media()

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。
用法：

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理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图表库来显示实时地音量变化折现图。