html5通过js实时获取麦克风音量

Posted 2022-02-02 绿叶清风

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5通过js实时获取麦克风音量相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>音量</title>
    <style>
       
    </style>
</head>
<body>
<div id="status">预备开始</div>


<script type="text/javascript">
    var mystatus = document.getElementById("status");
    debugger
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    if (!navigator.getUserMedia) 
        mystatus.innerHTML = "您的浏览器不支持获取音频。"
    
    navigator.getUserMedia( audio: true , onSuccess, onError); //调用麦克风捕捉音频信息，成功时触发onSuccess函数，失败时触发onError函数
    function onError() 
        mystatus.innerHTML = "获取音频时好像出了点问题。"
    
    function onSuccess(stream) 


        //创建一个音频环境对像
        audioContext = window.AudioContext || window.webkitAudioContext;
        context = new audioContext();

        //将声音输入这个对像
        audioInput = context.createMediaStreamSource(stream);

        //设置音量节点
        volume = context.createGain();
        audioInput.connect(volume);

        //创建缓存，用来缓存声音
        var bufferSize = 2048;

        // 创建声音的缓存节点，createJavaScriptNode方法的
        // 第二个和第三个参数指的是输入和输出都是双声道。
        recorder = context.createScriptProcessor(bufferSize, 1, 1);

        // 录音过程的回调函数，基本上是将左右两声道的声音
        // 分别放入缓存。
        recorder.onaudioprocess = function (e) 
            var buffer = e.inputBuffer.getChannelData(0); //获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
            //创建变量并迭代来获取最大的音量值
            var maxVal = 0;
            for (var i = 0; i < buffer.length; i++) 
                if (maxVal < buffer[i]) 
                    maxVal = buffer[i];
                
            
            //显示音量值
            mystatus.innerHTML = "您的音量值：" + Math.round(maxVal * 100);
            if (maxVal > .5) 
                //当音量值大于0.5时，显示“声音太响”字样，并断开音频连接
                mystatus.innerHTML = "您的声音太响了!!";
                // liveSource.disconnect(levelChecker);
            
        

        // 将音量节点连上缓存节点，换言之，音量节点是输入
        // 和输出的中间环节。
        volume.connect(recorder);

        // 将缓存节点连上输出的目的地，可以是扩音器，也可以
        // 是音频文件。
        recorder.connect(context.destination);
       
        
    
</script>
</body>
</html>

以上是关于html5通过js实时获取麦克风音量的主要内容，如果未能解决你的问题，请参考以下文章

html5通过js实时获取麦克风音量

有没有办法降低 HTML5 录制的录制音量以防止反馈？