HyperFrames Media
Text-to-Speech (TTS)
<div data-hf-clip
data-hf-tts="Welcome to HyperFrames."
data-hf-tts-voice="en-US-neural-f1"
data-hf-tts-speed="1.0"
data-hf-tts-emotion="neutral"
data-hf-start="1s">
</div>
| Attribute | Values |
|---|
data-hf-tts-voice | voice ID |
data-hf-tts-speed | 0.5–2.0 |
data-hf-tts-pitch | -20 to +20 semitones |
data-hf-tts-emotion | neutral, cheerful, sad, excited, calm |
Voice IDs
| ID | Lang | Gender |
|---|
en-US-neural-f1 | en-US | F |
en-US-neural-m1 | en-US | M |
en-GB-neural-f1 | en-GB | F |
en-AU-neural-m1 | en-AU | M |
es-ES-neural-f1 | es-ES | F |
fr-FR-neural-f1 | fr-FR | F |
de-DE-neural-m1 | de-DE | M |
ja-JP-neural-f1 | ja-JP | F |
zh-CN-neural-f1 | zh-CN | F |
Transcription
npx hyperframes transcribe assets/interview.mp4 --out assets/interview.vtt
Background Removal
npx hyperframes bg-remove assets/speaker.jpg --out assets/speaker-nobg.png
npx hyperframes bg-remove assets/speaker.mp4 --out assets/speaker-nobg.webm --model quality
Audio Ducking
<audio data-hf-clip data-hf-start="0s" src="assets/bg-music.mp3"
data-hf-duck="0.15"
data-hf-duck-attack="0.3s"
data-hf-duck-release="0.6s" />
Waveform Visualization
<div data-hf-clip data-hf-start="0s" data-hf-duration="10s"
data-hf-waveform="assets/music.mp3"
data-hf-waveform-color="#58a6ff"
data-hf-waveform-style="bars"
style="width:800px;height:120px;position:absolute;bottom:40px;left:560px;">
</div>
Styles: bars, line, circle, dots