I’m developing a Telegram Mini App that requires microphone access to record audio and transcribe it. I’ve been trying to use the MediaRecorder
API for this functionality. However, the recorded audio is either empty or not functioning as expected when the app runs in the Telegram Mini App web view (in-app browser)
Here’s the basic setup I’m using to request microphone access and record audio with MediaRecorder:
const AudioRecorderComponent = () => {
const [isRecording, setIsRecording] = useState(false);
const [audioBlob, setAudioBlob] = useState(null);
const startRecording = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
const chunks = [];
mediaRecorder.ondataavailable = (event) => {
chunks.push(event.data);
};
mediaRecorder.onstop = () => {
const audio = new Blob(chunks, { type: 'audio/wav' });
setAudioBlob(audio);
stream.getTracks().forEach(track => track.stop());
};
mediaRecorder.start();
setIsRecording(true);
// Stop recording after 5 seconds as a test
setTimeout(() => {
mediaRecorder.stop();
setIsRecording(false);
}, 5000);
} catch (error) {
console.error("Microphone access error:", error);
}
};
return (
<div>
<button onClick={startRecording} disabled={isRecording}>
{isRecording ? 'Recording...' : 'Start Recording'}
</button>
{audioBlob && <audio controls src={URL.createObjectURL(audioBlob)} />}
</div>
);
};
export default AudioRecorderComponent;
Questions
Does Telegram Mini App support microphone access via MediaRecorder? I couldn’t find documentation specifically addressing this for Telegram Mini Apps.
Are there any workarounds or alternative approaches to reliably access the microphone in Telegram’s web view?
Has anyone successfully implemented audio recording in a Telegram Mini App, and if so, what approach did you use?
What I’ve Tried
Testing in Different Environments: The code works perfectly in a regular browser (both mobile and desktop), but not in the Telegram Mini App web view.
Checking Permissions: I verified that microphone permissions are being requested and granted. The MediaRecorder API seems to initialize without errors, but the recorded Blob always has the same size, and there’s no audible playback.
Console Logs for Debugging:
Added logs in the ondataavailable event to check chunk sizes – each chunk has a size of 0 in the Telegram web view.
Verified that navigator.mediaDevices and MediaRecorder are supported in the environment, as indicated by the lack of initialization errors.