前端基础（四十一）：实时获取麦克风音量

Prosper Lee

于 2024-11-18 20:23:50 发布

阅读量556

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签：前端

本文链接：https://blog.csdn.net/weixin_43526371/article/details/143865910

前端基础专栏收录该内容

43 篇文章

订阅专栏

效果

在这里插入图片描述

源码

<button id="open">打开麦克风</button>
<button id="close">关闭麦克风</button>

<input id="range" type="range" min="0" max="100" value="0" />

let _mediaStream = null;
let _scriptProcessor = null;

document.querySelector('#open').onclick = () => {

    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(mediaStream => {

            _mediaStream = mediaStream;

            const audioContext = new AudioContext();

            const mediaStreamSource = audioContext.createMediaStreamSource(_mediaStream);

            const analyser = audioContext.createAnalyser();

            _scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);

            mediaStreamSource.connect(analyser);

            analyser.connect(_scriptProcessor);

            _scriptProcessor.connect(audioContext.destination);

            _scriptProcessor.onaudioprocess = audioProcessingEvent => {

                const uint8Array = new Uint8Array(analyser.frequencyBinCount);

                analyser.getByteFrequencyData(uint8Array);

                let volumeTotal = 0;

                uint8Array.forEach(d => volumeTotal += d);

                document.getElementById('range').value = volumeTotal / uint8Array.length;

            }

        });

}

document.querySelector('#close').onclick = () => {

    const audioTracks = _mediaStream.getAudioTracks();

    audioTracks.forEach(audioTrack => audioTrack.stop());

    _scriptProcessor.disconnect();

    document.querySelector('#range').value = 0;

}