前端录音时监控音量

参考: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);
		}
	};
}
原文地址:https://www.cnblogs.com/xym4869/p/13857506.html