react 如何调用麦克风
调用麦克风的基本方法
在React中调用麦克风主要通过浏览器的MediaDevices API实现，核心是navigator.mediaDevices.getUserMedia()方法。该方法返回一个Promise，解析后得到音频流。
import { useState, useEffect } from 'react';
function MicrophoneAccess() {
const [stream, setStream] = useState(null);
const startMicrophone = async () => {
try {
const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
setStream(audioStream);
} catch (error) {
console.error('Error accessing microphone:', error);
}
};
useEffect(() => {
return () => {
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
};
}, [stream]);
return (
<div>
<button onClick={startMicrophone}>Start Microphone</button>
</div>
);
}处理权限和错误
浏览器会要求用户授予麦克风权限。需要处理用户拒绝权限或设备不存在的情况。常见的错误类型包括NotAllowedError（用户拒绝）和NotFoundError（无麦克风设备）。
const handleErrors = (error) => {
switch(error.name) {
case 'NotAllowedError':
alert('Permission denied. Please allow microphone access.');
break;
case 'NotFoundError':
alert('No microphone device found.');
break;
default:
console.error('Microphone error:', error);
}
};音频可视化实现
获取音频流后，可通过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 updateVisualization = () => {
analyser.getByteTimeDomainData(dataArray);
// 使用dataArray进行可视化渲染
requestAnimationFrame(updateVisualization);
};
updateVisualization();
return () => {
source.disconnect();
audioContext.close();
};
}, [stream]);第三方库简化流程
使用react-media-recorder等库可以简化流程：
import { useReactMediaRecorder } from 'react-media-recorder';
const MicrophoneComponent = () => {
const { startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({
audio: true,
onStop: (blobUrl) => console.log('Audio saved to:', blobUrl)
});
return (
<div>
<button onClick={startRecording}>Start</button>
<button onClick={stopRecording}>Stop</button>
<audio src={mediaBlobUrl} controls />
</div>
);
};浏览器兼容性注意事项
不同浏览器对音频API的支持程度不同。建议添加特性检测：
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
alert('Audio API not supported in this browser');
}Safari需要完全兼容的网站使用HTTPS协议。旧版浏览器可能需要polyfill或前缀处理。
