js+canvas麦克风音浪波形图

罗罗诺亚D路飞

已于 2023-06-30 12:00:11 修改

阅读量1.2k

点赞数 3

文章标签： javascript

于 2023-06-28 18:46:11 首次发布

本文链接：https://blog.csdn.net/weixin_72923430/article/details/131443035

版权

自己看了好多资料才算写出来，但是还有很多地方不懂

有路过的大神帮忙看看哪里可以改进一下

<!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>
        .sound_wave_canvas {
            background-color: rgb(255, 255, 255);
            transform: scale(0.5);
        }
    </style>
</head>

<body>
    <canvas class="sound_wave_canvas"></canvas>

    <div id="status">预备开始</div>


    <script type="text/javascript">
        var mystatus = document.getElementById("status");
        const cvs = document.querySelector('.sound_wave_canvas')
        const ctx = cvs.getContext('2d')
        function initCvs() {
            cvs.width = (window.innerWidth / 4) * devicePixelRatio;
            cvs.height = (window.innerHeight / 8) * devicePixelRatio
        }
        initCvs()
        
        let dataArray, analyser;
        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;
            audCtx = new audioContext();
            // console.log("音频环境对像---",audCtx);
            //将声音输入这个对像
            source = audCtx.createMediaStreamSource(stream);//创建一个音频源节点  createMediaStreamSource 创建媒体流源     createMediaElementSource  创建媒体元素源

            //设置音量节点
            volume = audCtx.createGain();
            console.log('音量节点---', volume);
            source.connect(volume);

            analyser = audCtx.createAnalyser()//创建一个分析器节点
            console.log("分析器节点", analyser);
            analyser.fftSize = 256;
            //创建数组，用于接收分析器节点的数据

            var bufferLength = analyser.frequencyBinCount;
            dataArray = new Uint8Array(bufferLength)
            console.log('分析器数据', dataArray);
            source.connect(analyser)
            //创建缓存，用来缓存声音
            var bufferSize = 2048;

            // 创建声音的缓存节点，createJavaScriptNode方法的
            // 第二个和第三个参数指的是输入和输出都是双声道。
            recorder = audCtx.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);
                }

                //把分析出来的波形绘制到canvas上
                //清空画布
                const { width, height } = cvs;
                ctx.clearRect(0, 0, width, height);

                //让分析器节点分析出数据到数组中
                analyser.getByteFrequencyData(dataArray)
                console.log(dataArray);
                const len = dataArray.length / 2.5;
                const barwidth = width / len / 2
                ctx.fillStyle = '#78c5f7'
                for (let i = 0; i < len; i++) {
                    const data = dataArray[i]; //<256
                    const barHeight = data / 255 * height
                    const x1 = i * barwidth + width / 2;
                    const x2 = width / 2 - (i + 1) * barwidth;
                    const y = height / 2
                    ctx.fillRect(x1, y, barwidth - 2, barHeight)
                    ctx.fillRect(x1, y, barwidth - 2, -barHeight)
                    ctx.fillRect(x2, y, barwidth - 2, barHeight)
                    ctx.fillRect(x2, y, barwidth - 2, -barHeight)
                }


            }

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

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


        }
    </script>
</body>

</html>

参考文章html5通过js实时获取麦克风音量_js获取麦克风音量_绿叶清风的博客-CSDN博客