前端录音时监控音量

参考：HTML5制作好玩的麦克风音量检测器（Web Audio API）

使用createScriptProcessor方法创建一个音频分析对象，获取audiobuffer，然后将音频转换为包含了PCM通道数据的32位浮点数组。

具体步骤：
运用Web Audio API来获取麦克风的音频流数据，从中计算每一次采样的最大音量值。以下是一些主要的步骤点：

1. 首先，创建一个管理和播放声音的audioContext对象，这一对象在不同的浏览器中也有不同写法，如AudioContext或webkitAudioContext等，在此仍然首先使用“或”运算来对其名称加以统一。
2. 在创建好audioContext对象后，可以借助其createMediaStreamSource方法，将stream参数传入，以实现将麦克风音频输入该对象。
3. 接着，通过createScriptProcessor方法创建一个音频分析对象，在该对象中指定采样的缓冲区域大小，该值一般为256、512、1024、2048、4096、8192、16384中的一种，数字越大则采样缓冲区越大，对应的audioprocess事件的触发频率也越低，数字越小则反之，在此将该参数设置为4096。
4. 同时，设置音频分析的输入与输出都是单声道，其参数为1（若要以双声道进行分析则可设置为2）。
5. 然后，通过调用麦克风音频输入对象的connect方法，将音频分析对象与来自麦克风的音频流进行连接，这样我们就可以通过audioprocess事件函数开始音频的处理，该事件在不断的音频采样中被触发。
6. 在音频处理函数中，通过事件参数的inputBuffer属性得到输入的采样区音频，然后使用getChannelData()方法，将音频转换为包含了PCM通道数据的32位浮点数组。
7. 使用useRef监控异步函数onaudioprocess的最大音量。不要在异步函数里使用setState，否则只会获取对最后一个值进行更新，并不能实时跟踪。我们将这一数值乘以100后取整，就得到了一个能够相对代表音量高低的指标，并将其显示在页面中。
8. 最后，我们做了一个判断，当音量指标的数值大于0.5时，显示“声音太响”字样，并断开音频连接。

  const maxVolume = useRef(0);

  function onSuccess(stream){
	audioContext = window.AudioContext || window.webkitAudioContext;
	context = new audioContext(); //创建一个管理、播放声音的对象
	liveSource = context.createMediaStreamSource(stream); //将麦克风的声音输入这个对象
        var levelChecker = context.createScriptProcessor(4096,1,1); //创建一个音频分析对象，采样的缓冲区大小为4096，输入和输出都是单声道
        liveSource.connect(levelChecker); //将该分析对象与麦克风音频进行连接
        levelChecker.onaudioprocess = function(e) { //开始处理音频
		var buffer = e.inputBuffer.getChannelData(0); //获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
		//使用useRef监控最大音量
                const maxvo = Math.max.apply(null, buffer);
                if (maxvo > maxVolume.current) maxVolume.current = maxvo;
		//显示音量值
		mystatus.innerHTML = "您的音量值："+Math.round(maxVolume.current*100);
		if(maxVal>.5){
			//当音量值大于0.5时，显示“声音太响”字样，并断开音频连接
			mystatus.innerHTML = "您的声音太响了!!";
			liveSource.disconnect(levelChecker);
		}
	};
}