react 如何调用麦克风
使用浏览器 API 获取麦克风权限
在 React 中调用麦克风需要通过浏览器的 MediaDevices API。确保应用运行在 HTTPS 环境或本地开发环境（如 localhost），否则浏览器可能拒绝权限请求。
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
console.log('麦克风访问已授权');
// 处理音频流
})
.catch(error => {
console.error('麦克风访问被拒绝:', error);
});封装为 React 自定义 Hook
将麦克风逻辑封装为可复用的 Hook，便于在组件中调用。以下示例展示如何创建 useMicrophone Hook：
import { useState, useEffect } from 'react';
function useMicrophone() {
const [stream, setStream] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
let mediaStream;
const initMicrophone = async () => {
try {
mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
setStream(mediaStream);
} catch (err) {
setError(err);
}
};
initMicrophone();
return () => {
if (mediaStream) {
mediaStream.getTracks().forEach(track => track.stop());
}
};
}, []);
return { stream, error };
}在组件中使用麦克风数据
通过 Hook 获取音频流后，可将其用于音频处理或可视化。以下示例展示如何显示麦克风状态：
function MicrophoneComponent() {
const { stream, error } = useMicrophone();
if (error) {
return <div>错误: {error.message}</div>;
}
if (!stream) {
return <div>请求麦克风权限中...</div>;
}
return <div>麦克风已启用</div>;
}处理音频数据
通过 AudioContext API 可进一步处理音频流。以下代码演示如何分析音频频率：
useEffect(() => {
if (!stream) return;
const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);
const dataArray = new Uint8Array(analyser.frequencyBinCount);
const update = () => {
analyser.getByteFrequencyData(dataArray);
console.log('频率数据:', dataArray);
requestAnimationFrame(update);
};
update();
return () => audioContext.close();
}, [stream]);注意事项
- 权限请求需由用户交互触发（如点击事件），某些浏览器会阻止未经触发的自动请求。
- 使用完毕后需手动关闭音频轨道，避免资源泄漏：
stream.getTracks().forEach(track => track.stop()); - 移动端浏览器可能存在额外限制，需测试目标平台的兼容性。
