h5吹气互动(利用recorderjs获取输入音量大小)

2023 年 3 月
一	二	三	四	五	六	日
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

h5吹气互动原理是利用获取麦克风音量，用一段逻辑来判断。研究了半天~

最开始用的是下面这种方法（在ios下失效）：

<!doctype html>
<html style="font-size: calc((100vw / 375)*10)">
<head>
    <meta charset="utf-8" ></meta>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>Disney Spring Web - voice！</title>
    <script src="./recorder.mp3.min.js"></script>   
</head>
<body>
    <div class="container" id="container"> 
        <div id="status">0</div>
        <div id="log">log...</div>
    </div> 
</body>
</html>

let mystatus = document.getElementById('status');
        let log = document.getElementById('log');

        window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia ||navigator.mediaDevices.getUserMedia;

        if(!navigator.getUserMedia){
            mystatus.innerHTML = "您的浏览器不支持获取音频。";
            log.innerHTML+="您的浏览器不支持获取音频。";
        }

        function onSuccess(stream){
            log.innerHTML+="onSuccess";
            mystatus.innerHTML = "获取音量中...";

            audioContext = window.AudioContext || window.webkitAudioContext;
            context = new audioContext(); //创建一个管理、播放声音的对象

            liveSource = context.createMediaStreamSource(stream); //将麦克风的声音输入这个对象
            var levelChecker = context.createScriptProcessor(4096,1,1); //创建一个音频分析对象，采样的缓冲区大小为4096，输入和输出都是单声道
            liveSource.connect(levelChecker); //将该分析对象与麦克风音频进行连接
            levelChecker.connect(context.destination);
            levelChecker.onaudioprocess = function(e) { //开始处理音频
                var buffer = e.inputBuffer.getChannelData(0); //获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组

                console.log(buffer);
                //创建变量并迭代来获取最大的音量值
                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);
                }
            };
        }

        function onError(e){
            log.innerHTML+=e;
            mystatus.innerHTML = "获取音频时好像出了点问题。";
        }

        try{
            navigator.getUserMedia({audio: true}, onSuccess, onError);

        }catch(err){
            log.innerHTML+=err;
        }

最后使用了开源的recorderjs：

recorderjs 开源地址： https://github.com/xiangyuecn/Recorder

var rec;
function startRec(){
    rec=Recorder({
        type:"mp3"
        ,sampleRate:16000
        ,bitRate:16 
        ,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate){ 
            var buffer = buffers[buffers.length-1]; 
            console.log(buffer); 
            // var buffer = buffers.getChannelData(0); //获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
            //创建变量并迭代来获取最大的音量值

            var maxVal = 0; 
            for (var i = 0; i < buffer.length; i++) {
                if (maxVal < buffer[i]) {
                    maxVal = buffer[i];
                }
            }
            //显示音量值
            console.log(maxVal);
            mystatus.innerHTML += "<br />您的音量值："+Math.round(maxVal/100);
            if(maxVal>300){ 
                //mystatus.innerHTML = "吹气成功!!"; 
                  rec.stop();
            }

        }

    });//使用默认配置，mp3格式
    
    //打开麦克风授权获得相关资源
    rec.open(function(){ 
        //开始录音
        rec.start();
    },
    function(msg,isUserNotAllow){
        //用户拒绝了权限或浏览器不支持
        alert((isUserNotAllow?"用户拒绝了权限，":"")+"无法录音:"+msg);
    });
};

//开始
startRec();

//3秒后自动结束，
setTimeout(function(){
    rec.stop();
}, 3000);

链接

近期文章

热门标签

新人福利，免费薅羊毛

============ 欢迎各位老板打赏~ ===========

与本文相关的文章

发表评论