前端錄音時監控音量

參考：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);
		}
	};
}