Screen Recorder with Audio

// SCREEN + MICROPHONE · MIXED INTO ONE FILE · NO INSTALL

Recording your screen is useful, but recording your screen with your voice explaining what is happening is far more valuable. This screen recorder with audio combines two browser APIs: getDisplayMedia for screen capture and getUserMedia for microphone input. Both streams are mixed together using the Web Audio API, producing a single video file that contains your screen visuals and your spoken narration synchronized perfectly.

The audio mixing happens entirely inside your browser. Your microphone signal and the screen capture are fed into an AudioContext, combined at the destination node, and attached to the MediaRecorder alongside the video track. The result is a standard WebM file that plays anywhere. There is no cloud processing, no upload step, and no account required. Toggle the mic on, click record, and talk through whatever you are showing on screen.

Advertisement
Screen recording via getDisplayMedia is not supported in Safari on iOS/macOS. Please use Chrome, Edge, or Firefox on desktop.
Recording screen
00:00
Choose a tab, window, or full screen to capture
Recording preview
Download WebM
Advertisement
Your screen content is never uploaded - processed locally - 100% private

How screen and audio mixing works

Step 1: Enable the "Include microphone audio" toggle above the record button. This tells the tool to request microphone access in addition to screen access.

Step 2: Click Start Recording. Your browser first asks which screen, window, or tab to capture. Then it requests microphone permission if not already granted. Both streams start simultaneously.

Step 3: The Web Audio API creates a mixing node. Your microphone audio and any system/tab audio from the screen share are combined into one audio track. This mixed track is paired with the video track from getDisplayMedia.

Step 4: When you stop, the recorder assembles the WebM file from the collected chunks. The preview shows your recording with synchronized audio. Download it and share it.

When you need screen recording with audio

Software tutorials become much clearer when the viewer can hear the instructor explain each step while watching the screen. Instead of annotating screenshots or writing paragraphs of text, record a 2-minute video that shows and tells simultaneously.

Code reviews and pull request walkthroughs are more effective as screen recordings with commentary. A developer can open the diff, walk through the changes on screen, explain their reasoning out loud, and share the video with the team.

Asynchronous feedback on design mockups works best when the reviewer can point at specific elements while explaining their thoughts. A screen recording with audio captures both the visual reference and the spoken critique in one deliverable.

Why SpeakAndRecord for screen with audio

Many free screen recorders either skip audio entirely or charge for the audio mixing feature. Others require installing desktop software (OBS, ShareX) and configuring audio sources manually. This tool handles the audio mixing automatically in the browser. Enable the toggle, record, done.

The mixed audio is captured at the same sample rate as the original sources and encoded with Opus, which delivers excellent quality at low bitrates. There is no quality loss from the mixing step, and the resulting file is compact enough to email or upload to a messaging platform.

Frequently asked questions

Can I record both my microphone and system audio?
Microphone audio is always captured when you enable the toggle. System/tab audio depends on what you share: if you share a browser tab with "Share tab audio" enabled, that audio is mixed with your mic. Full desktop audio capture requires a virtual audio device on most operating systems.
Will there be an echo if I record my mic and tab audio together?
If you are playing audio from a tab and recording your mic simultaneously, your mic might pick up the tab audio through your speakers. Use headphones to avoid this feedback loop and get a clean narration track.
What audio codec is used in the output?
Opus, which is the standard audio codec for WebM containers. Opus delivers near-transparent quality at 128 kbps and handles both voice and music well. Every modern browser can decode it natively.
Can I adjust the microphone volume in the recording?
The current version records the microphone at its system-level volume. Adjust your mic input level in your operating system sound settings before recording for the best results.
Does the audio sync with the video?
Yes. Both streams are captured and mixed in real time by the same MediaRecorder instance, so audio and video are perfectly synchronized in the output file.
🖥️
Screen Recorder
Basic screen capture
🎙️
Voice Recorder
Audio-only recording
📷
With Webcam
Screen + camera overlay
🎤
Mic Test
Check your mic first