网页实现播放麦克风实时声音并显示音量

作者: 伊夫_艾尔斯 | 来源:发表于2024-07-11 17:17 被阅读0次

收集一些Android常用的功能库（不定期更新）
iOS视频播放的四种方案
ios麦克风音量实时检测
ios麦克风音量实时检测
HTML5媒体API
树莓派麦克风摄像头测试
pyaudio+socket实现语音通话
getUserMedia 与 audioContext 实现八分
[iOS] 音乐/录音实时波形图
脚本-声音

要实现麦克风声音直接播放，并使用进度条显示音量，可以结合 Web Audio API 和 JavaScript 的一些 DOM 操作。我们可以使用 AnalyserNode 来获取音频数据，并计算音量，然后将其显示在进度条上。

以下是一个完整的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>麦克风声音直接播放及音量显示</title>
</head>
<body>
    <h1>麦克风声音直接播放及音量显示</h1>
    <div>
        <button onclick="start()">开始</button>
        <button onclick="stop()">停止</button>
    </div>
    <div>
        <label for="volume">音量:</label>
        <progress id="volume" value="0" max="1"></progress>
    </div>
    <script>
        let audioContext;
        let microphone;
        let analyser;
        let javascriptNode;
        let audioStream;
        let rafID;

        function start() {
            navigator.mediaDevices.getUserMedia({ audio: true })
                .then(stream => {
                    audioStream = stream;
                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
                    analyser = audioContext.createAnalyser();
                    microphone = audioContext.createMediaStreamSource(stream);
                    javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);

                    analyser.smoothingTimeConstant = 0.3;
                    analyser.fftSize = 1024;

                    microphone.connect(analyser);
                    analyser.connect(javascriptNode);
                    javascriptNode.connect(audioContext.destination);
                    microphone.connect(audioContext.destination);  // 直接连接麦克风到扬声器

                    javascriptNode.onaudioprocess = () => {
                        let array = new Uint8Array(analyser.frequencyBinCount);
                        analyser.getByteTimeDomainData(array);

                        let values = 0;
                        for (let i = 0; i < array.length; i++) {
                            let value = (array[i] - 128) / 128;
                            values += value * value;
                        }
                        let average = Math.sqrt(values / array.length);

                        let volumeProgressBar = document.getElementById('volume');
                        volumeProgressBar.value = average;
                    };

                    updateVolume();
                })
                .catch(err => {
                    console.error('麦克风权限获取失败:', err);
                });
        }

        function updateVolume() {
            rafID = requestAnimationFrame(updateVolume);
        }

        function stop() {
            if (microphone) {
                microphone.disconnect();
            }
            if (analyser) {
                analyser.disconnect();
            }
            if (javascriptNode) {
                javascriptNode.disconnect();
            }
            if (audioContext) {
                audioContext.close();
            }
            if (audioStream) {
                audioStream.getTracks().forEach(track => track.stop());
            }
            if (rafID) {
                cancelAnimationFrame(rafID);
            }

            document.getElementById('volume').value = 0;
        }
    </script>
</body>
</html>