Real-time audio transcription and speech translation interface with Web Audio.
Tick off requirements as you build to track real-time completion.
Follow this chronological guide to build the project from scratch.
Request permission to access the user mic and record raw audio blocks using browser MediaRecorder API hooks.
import { useState, useRef } from 'react';
export function useRecorder(onDataAvailable: (blob: Blob) => void) {
const [isRecording, setIsRecording] = useState(false);
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
const startRecording = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
mediaRecorderRef.current = mediaRecorder;
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) onDataAvailable(event.data);
};
// Slice chunks every 2.5 seconds
mediaRecorder.start(2500);
setIsRecording(true);
};
const stopRecording = () => {
mediaRecorderRef.current?.stop();
setIsRecording(false);
};
return { isRecording, startRecording, stopRecording };
}Real issues students hit during development and how to troubleshoot them fast.
Continue building your skills with similar projects.
Instant messaging app with WebSocket channels, online presence, and typing indicators.
Background job pipeline with BullMQ, Redis, worker pools, retries, and dead-letter queues.
Custom caching proxy server returning cached responses for identical endpoints requests.