A free React audio region loop for repeating a real passage with native playback.
Language workshop · pronunciation
Repeat the original line and notice where the stress falls. The player stays native; the loop only returns playback to this recorded passage.
Passage: 0.00–2.20 seconds
Checking recording duration…
At dawn, the bell answers across the harbour.
Instrument bench · resonance
A struck-string reference for listening tests. This nonverbal recording is a locally generated three-part harmonic chord with a soft attack and decay.
Passage: 1.00–4.00 seconds
Checking recording duration…
Nonverbal audio: three sustained harmonic tones enter together, ring briefly, then fade to silence.
<MediaAudioRegionLoop src="/media/pronunciation.wav" title="Harbour sentence · spoken model" transcript="At dawn, the bell answers across the harbour." regionStart={0} regionEnd={2.2} />Audio Region Loop is a free React audio component for Next.js that returns native playback to one metadata-validated passage. A language learner can repeat a spoken phrase; a sound designer can listen again to a short original recording. The browser still owns the audio controls, and the visible transcript or nonverbal description remains available at every step.
The loop follows native media events rather than a frame clock. Browsers deliver those events at varying rates, so playback may pass the selected end slightly before it seeks back to the start; the component makes no sample-accurate promise. The native player, transcript and direct source link render before hydration, while the loop action appears only when the loaded recording contains the requested region. A failed source, invalid range, or rejected play request leaves ordinary media access intact.
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/media-audio-region-loopimport { MediaAudioRegionLoop } from "@/components/media-audio-region-loop";
export default function Page() {
return (
<MediaAudioRegionLoop
src="/media/pronunciation.wav"
title="Harbour sentence · spoken model"
transcript="At dawn, the bell answers across the harbour."
regionStart={0}
regionEnd={2.2}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | Consumer-owned audio URL. No microphone or streaming client is used. |
| title | string | required | Specific visible title for the recording. |
| transcript | string | required | Complete transcript, or an accurate description for nonverbal audio. |
| regionStart | number | required | Finite, non-negative start time in seconds. |
| regionEnd | number | required | Finite end time in seconds, greater than the start and no later than the loaded duration. |
| className | string | undefined | Additional classes merged onto the section with cn(). |
The component exposes one accent and one track token so consumers can align the passage controls with their theme. Native audio controls keep their browser-provided appearance and semantics.
:root {
--audio-region-ink: var(--primary);
--audio-region-track: var(--border);
}