#tools

Sound Extractor (sound_extractor_portrait.html)

A browser-only, single-file HTML tool that trims any moment from a video or audio file into a tiny sound clip and copies it as a paste-ready <audio> snippet. Written in pure HTML/CSS/JS with zero dependencies, laid out for a portrait (9:16) screen. Everything runs in the browser — nothing is ever uploaded to a server.

---

1. Overview

Item	Detail
Format	Single .html file (0 dependencies)
Layout	Portrait 9:16 (height: 177.78vw, all dimensions in vw)
Input	mp4, mov, mkv, webm, avi, m4v, mp3, wav, m4a, ogg …
Output	WebM · Opus sound clip + Base64 data-URL <audio> snippet
Use case	Short-form / tutorial demo app ("subscribe & like" footer)

---

2. Three-Step Workflow

A tab bar switches between screens; each tab unlocks only after the previous step is done.

Step 1 — Upload

• Drag & drop a file onto the dropzone, or click to pick one
• Safari / iOS (WebKit) can't play or record WebM/Opus, so a compatibility warning banner is shown

Step 2 — Trim

• Renders the waveform onto a Canvas
• Drag the left/right handles to set start/end; drag the whole selection to move it
• Loops the selected range during playback, with a playhead marking the current position
• Quality presets: Low 16k / Voice 24k / Standard 48k (recommended) / Good 96k / High 128k
• Live estimate of selected duration, output size, and snippet size shown as a hint

Step 3 — Result

• Plays the extracted WebM · Opus clip (shows compression ratio vs. original)
• Auto-generates a paste-ready <audio controls src="data:..."> snippet with a Copy button

---

3. How It Works

Decoding

• file.arrayBuffer() → AudioContext.decodeAudioData() produces an AudioBuffer
• If direct video decoding fails, falls back to real-time extraction: grabs the audio track via video.captureStream(), records with MediaRecorder, then re-decodes

Waveform rendering

• Aggregates channel data into per-pixel min/max bars drawn directly on a Canvas
• Corrected for devicePixelRatio; re-renders on window resize

Clip extraction (core)

• Copies the selected sample range into a new AudioBuffer
• Pipes an AudioBufferSourceNode → MediaStreamDestination and records it in real time with MediaRecorder, so the output is exactly the selected range as WebM/Opus
• Encoding progress callback plus onended / timeout safety guards

Codec selection

• pickRecorderMime() probes support in order: audio/webm;codecs=opus → audio/webm → audio/mp4;codecs=opus → audio/mp4 → audio/ogg;codecs=opus

---

4. Key Code Locations

Feature	Function	Line
Screen switching	showScreen()	341
WebM support check	checkWebMSupport()	355
File handling entry	handleFile()	603
Decoding	decodeFile()	674
Real-time video fallback	extractAudioFromVideoRealtime()	691
Waveform drawing	renderWaveform()	403
Selection UI	updateSelectionUI()	450
Clip extract / encode	extractAudioClip()	760
Result handling	processClip()	829
Snippet generation	renderAudioSnippet()	884
Reset	resetBtn handler	904

---

5. Constraints / Caveats

• Safari · iPhone · iPad: can't play or record WebM/Opus → a clip can be built but not previewed. Use desktop Chrome / Edge / Firefox.
• Output is fixed to WebM/Opus (falls back to mp4/ogg only if the browser supports nothing else).
• Real-time recording means extraction time ≈ length of the selected range.
• The data-URL snippet is Base64, so it's ~4/3× larger than the raw clip.

---

6. Default Selection Rules

On load, the initial selection is chosen automatically based on clip length.

Clip length	Default selection
≤ 0.5s	Whole clip
0.5s–2.5s	Middle 0.5s
≥ 2.5s	1.0s – 1.5s