console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>麦克风音量测试</title>
</head>
<body>
    <h1>麦克风音量测试</h1>
    <button id="startButton">开始</button>
    <p id="volumeDisplay">音量: </p>

    <script>
        const startButton = document.getElementById('startButton');
        const volumeDisplay = document.getElementById('volumeDisplay');
        let audioContext;
        let analyser;
        let microphoneStream;

        startButton.addEventListener('click', async () => {
            try {
                // 请求麦克风访问权限
                microphoneStream = await navigator.mediaDevices.getUserMedia({ audio: true });
                
                // 创建一个AudioContext
                audioContext = new (window.AudioContext || window.webkitAudioContext)();
                
                // 创建一个AnalyserNode
                analyser = audioContext.createAnalyser();
                analyser.fftSize = 256;
                const bufferLength = analyser.frequencyBinCount;
                const dataArray = new Uint8Array(bufferLength);
                
                // 从麦克风流中创建一个MediaStreamAudioSourceNode
                const source = audioContext.createMediaStreamSource(microphoneStream);
                source.connect(analyser);
                
                // 更新和显示音量的函数
                const updateVolume = () => {
                    analyser.getByteFrequencyData(dataArray);
                    let sum = 0;
                    for (let i = 0; i < bufferLength; i++) {
                        sum += dataArray[i];
                    }
                    let average = sum / bufferLength;
                    volumeDisplay.textContent = `音量: ${average.toFixed(2)}分贝`;
                    requestAnimationFrame(updateVolume);
                };
                
                // 开始更新音量
                updateVolume();
            } catch (err) {
                console.error('访问麦克风时出错:', err);
            }
        });
    </script>
</body>
</html>