如何让Google Chrome对语音转录功能仅请求一次麦克风权限？

问题说明 #

我写了一段包含两个textarea和对应按钮的语音转录代码，每个按钮控制一个textarea的转录功能，但每次点击按钮时Chrome都会重复请求麦克风权限，希望实现仅授权一次并保持权限有效。

原代码如下：

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transcrição de Áudio</title>
    <style>
        textarea {
            width: 100%;
            height: 150px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <textarea id="transcription1" placeholder="A transcrição aparecerá aqui"></textarea>
    <button id="startStopBtn1">Iniciar/Parar Transcrição 1</button>
    <textarea id="transcription2" placeholder="A transcrição aparecerá aqui"></textarea>
    <button id="startStopBtn2">Iniciar/Parar Transcrição 2</button>

    <script>
        let isRecording1 = false;
        let isRecording2 = false;
        let recognition1;
        let recognition2;
        let silenceTimer1;
        let silenceTimer2;
        let hasPermission1 = false;
        let hasPermission2 = false;

        const startStopBtn1 = document.getElementById('startStopBtn1');
        const transcriptionInput1 = document.getElementById('transcription1');
        const startStopBtn2 = document.getElementById('startStopBtn2');
        const transcriptionInput2 = document.getElementById('transcription2');

        // Função para inicializar o reconhecimento de fala
        function initRecognition(recognition, transcriptionInput, silenceTimer) {
            recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.lang = 'pt-BR';

            recognition.onresult = (event) => {
                clearTimeout(silenceTimer);
                let interimTranscript = '';
                for (let i = event.resultIndex; i < event.results.length; ++i) {
                    if (event.results[i].isFinal) {
                        transcriptionInput.value += event.results[i][0].transcript + '\n';
                    } else {
                        interimTranscript += event.results[i][0].transcript;
                    }
                }
            };

            recognition.onspeechend = () => {
                resetSilenceTimer(recognition, silenceTimer);
            };

            recognition.onerror = (event) => {
                console.error('Erro no reconhecimento de fala:', event.error);
                stopRecording(recognition, silenceTimer);
            };

            return recognition;
        }

        // Inicializar reconhecimento de fala ao clicar no botão pela primeira vez
        startStopBtn1.addEventListener('click', () => {
            if (!hasPermission1) {
                hasPermission1 = true;
                recognition1 = initRecognition(recognition1, transcriptionInput1, silenceTimer1);
            }
            toggleRecording(recognition1, startStopBtn1, transcriptionInput1, silenceTimer1, isRecording1);
        });

        startStopBtn2.addEventListener('click', () => {
            if (!hasPermission2) {
                hasPermission2 = true;
                recognition2 = initRecognition(recognition2, transcriptionInput2, silenceTimer2);
            }
            toggleRecording(recognition2, startStopBtn2, transcriptionInput2, silenceTimer2, isRecording2);
        });

        function toggleRecording(recognition, button, transcriptionInput, silenceTimer, isRecording) {
            if (isRecording) {
                stopRecording(recognition, silenceTimer);
                button.textContent = "Iniciar Transcrição";
            } else {
                startRecording(recognition, button, transcriptionInput, silenceTimer);
                button.textContent = "Parar Transcrição";
            }
            isRecording = !isRecording;
        }

        function startRecording(recognition, button, transcriptionInput, silenceTimer) {
            recognition.start();
            resetSilenceTimer(recognition, silenceTimer);
        }

        function stopRecording(recognition, silenceTimer) {
            recognition.stop();
            clearTimeout(silenceTimer);
        }

        function resetSilenceTimer(recognition, silenceTimer) {
            clearTimeout(silenceTimer);
            silenceTimer = setTimeout(() => {
                stopRecording(recognition, silenceTimer);
            }, 5000);
        }
    </script>
</body>
</html>

问题根源 #

• 权限请求时机错误：原代码在点击按钮时才初始化SpeechRecognition实例，每次初始化可能触发权限请求；且没有提前获取麦克风权限，导致每次启动识别都可能弹窗。
• 状态变量作用域问题：toggleRecording函数中传递的isRecording是值类型，修改后不会同步更新全局的isRecording1/isRecording2，导致状态混乱，可能重复触发识别逻辑。
• 多实例权限校验重复：创建两个独立的SpeechRecognition实例，可能导致浏览器重复校验权限。

解决方案 #

核心修改点 #

• 提前通过navigator.mediaDevices.getUserMedia请求麦克风权限，授权一次后后续语音识别不会再弹窗。
• 修复状态变量的作用域问题，直接操作全局的isRecording变量。
• 优化实例管理，确保每个SpeechRecognition实例只初始化一次。

修改后的完整代码：

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transcrição de Áudio</title>
    <style>
        textarea {
            width: 100%;
            height: 150px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <textarea id="transcription1" placeholder="A transcrição aparecerá aqui"></textarea>
    <button id="startStopBtn1">Iniciar/Parar Transcrição 1</button>
    <textarea id="transcription2" placeholder="A transcrição aparecerá aqui"></textarea>
    <button id="startStopBtn2">Iniciar/Parar Transcrição 2</button>

    <script>
        let isRecording1 = false;
        let isRecording2 = false;
        let recognition1;
        let recognition2;
        let hasMicPermission = false; // 统一管理麦克风权限

        const startStopBtn1 = document.getElementById('startStopBtn1');
        const transcriptionInput1 = document.getElementById('transcription1');
        const startStopBtn2 = document.getElementById('startStopBtn2');
        const transcriptionInput2 = document.getElementById('transcription2');

        // 提前请求麦克风权限
        async function requestMicPermission() {
            try {
                await navigator.mediaDevices.getUserMedia({ audio: true });
                hasMicPermission = true;
                console.log("麦克风权限已获取");
            } catch (err) {
                console.error("获取麦克风权限失败:", err);
                alert("无法获取麦克风权限，转录功能无法使用");
            }
        }

        // 页面加载时请求权限
        window.addEventListener('load', requestMicPermission);

        // Função para inicializar o reconhecimento de fala
        function initRecognition(transcriptionInput, timerRef) {
            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.lang = 'pt-BR';

            recognition.onresult = (event) => {
                clearTimeout(timerRef.current);
                let interimTranscript = '';
                for (let i = event.resultIndex; i < event.results.length; ++i) {
                    if (event.results[i].isFinal) {
                        transcriptionInput.value += event.results[i][0].transcript + '\n';
                    } else {
                        interimTranscript += event.results[i][0].transcript;
                    }
                }
            };

            recognition.onspeechend = () => {
                resetSilenceTimer(recognition, timerRef);
            };

            recognition.onerror = (event) => {
                console.error('Erro no reconhecimento de fala:', event.error);
                stopRecording(recognition, timerRef);
            };

            return recognition;
        }

        // 使用对象引用保存定时器，避免作用域丢失
        const timerRef1 = { current: null };
        const timerRef2 = { current: null };

        // 按钮1事件监听
        startStopBtn1.addEventListener('click', () => {
            if (!hasMicPermission) return;
            
            if (!recognition1) {
                recognition1 = initRecognition(transcriptionInput1, timerRef1);
            }
            
            if (isRecording1) {
                stopRecording(recognition1, timerRef1);
                startStopBtn1.textContent = "Iniciar Transcrição 1";
            } else {
                startRecording(recognition1, timerRef1);
                startStopBtn1.textContent = "Parar Transcrição 1";
            }
            isRecording1 = !isRecording1;
        });

        // 按钮2事件监听
        startStopBtn2.addEventListener('click', () => {
            if (!hasMicPermission) return;
            
            if (!recognition2) {
                recognition2 = initRecognition(transcriptionInput2, timerRef2);
            }
            
            if (isRecording2) {
                stopRecording(recognition2, timerRef2);
                startStopBtn2.textContent = "Iniciar Transcrição 2";
            } else {
                startRecording(recognition2, timerRef2);
                startStopBtn2.textContent = "Parar Transcrição 2";
            }
            isRecording2 = !isRecording2;
        });

        function startRecording(recognition, timerRef) {
            recognition.start();
            resetSilenceTimer(recognition, timerRef);
        }

        function stopRecording(recognition, timerRef) {
            recognition.stop();
            clearTimeout(timerRef.current);
        }

        function resetSilenceTimer(recognition, timerRef) {
            clearTimeout(timerRef.current);
            timerRef.current = setTimeout(() => {
                stopRecording(recognition, timerRef);
                // 停止后恢复按钮文本
                if (recognition === recognition1) {
                    startStopBtn1.textContent = "Iniciar Transcrição 1";
                    isRecording1 = false;
                } else if (recognition === recognition2) {
                    startStopBtn2.textContent = "Iniciar Transcrição 2";
                    isRecording2 = false;
                }
            }, 5000);
        }
    </script>
</body>
</html>

关键改进说明 #

• 提前获取权限：页面加载时通过getUserMedia请求麦克风权限，用户授权后，后续SpeechRecognition启动时不会再弹出权限请求。
• 统一权限管理：用hasMicPermission变量统一记录权限状态，避免每个实例单独判断。
• 修复定时器作用域：使用对象引用保存定时器，解决原代码中定时器变量无法正确更新的问题。
• 优化状态切换：直接在按钮点击事件中处理状态切换，避免值传递导致的状态不同步问题。

内容的提问来源于stack exchange，提问作者Alexandre Guedes