React应用触发录音事件前如何确保用户已授予麦克风权限

问题核心 #

用户首次点击录音按钮触发麦克风权限申请时，点击「允许」需要松开鼠标，此时录音逻辑未正常启动，onMouseUp触发时会因不存在录音实例抛出异常。

实现思路 #

在组件内维护麦克风授权状态，onMouseDown触发时先判断授权状态：

• 已授权：正常执行录音启动逻辑
• 未授权：仅申请麦克风权限，申请成功后更新授权状态，本次不触发录音流程

完整实现代码 #

import { useState, useCallback, useEffect } from 'react';

const VoiceRecordButton = () => {
  // 麦克风授权状态标记
  const [hasMicPermission, setHasMicPermission] = useState(false);
  // 存储录音实例，供结束录音时调用
  const [recorderInstance, setRecorderInstance] = useState(null);

  // 麦克风权限申请方法
  const applyMicPermission = useCallback(async () => {
    try {
      // 申请权限时临时拉起媒体流，申请后立即销毁避免占用设备
      const tempStream = await navigator.mediaDevices.getUserMedia({ audio: true });
      tempStream.getAudioTracks().forEach(track => track.stop());
      setHasMicPermission(true);
      return true;
    } catch (error) {
      console.error('麦克风授权失败：', error);
      // 可在此补充用户拒绝授权的提示逻辑
      return false;
    }
  }, []);

  // 组件初始化提前查询权限状态（可选优化）
  useEffect(() => {
    if (!navigator.permissions?.query) return;
    navigator.permissions.query({ name: 'microphone' }).then((status) => {
      setHasMicPermission(status.state === 'granted');
      status.onchange = () => setHasMicPermission(status.state === 'granted');
    });
  }, []);

  // 鼠标按下启动录音逻辑
  const onMouseDown = useCallback(async () => {
    // 未授权场景仅申请权限，本次不启动录音
    if (!hasMicPermission) {
      await applyMicPermission();
      return;
    }

    // 已授权场景正常启动录音
    const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const recorder = new MediaRecorder(audioStream);
    // 可在此补充recorder的ondataavailable等事件绑定逻辑，接收录音数据
    recorder.start();
    setRecorderInstance(recorder);
  }, [hasMicPermission, applyMicPermission]);

  // 鼠标松开结束录音逻辑
  const onMouseUp = useCallback(() => {
    if (!recorderInstance || recorderInstance.state === 'inactive') return;
    recorderInstance.stop();
    recorderInstance.stream.getAudioTracks().forEach(track => track.stop());
    setRecorderInstance(null);
    // 可在此补充录音结束后的后续处理逻辑
  }, [recorderInstance]);

  // 可选：适配移动端触摸事件
  const onTouchStart = (e) => {
    e.preventDefault();
    onMouseDown();
  };
  const onTouchEnd = (e) => {
    e.preventDefault();
    onMouseUp();
  };

  return (
    <button 
      onMouseDown={onMouseDown}
      onMouseUp={onMouseUp}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
    >
      按住录音
    </button>
  );
};

内容的提问来源于stack exchange，提问作者John Bustos