AudioRecorder

H5P equivalent

H5P Audio Recorder

When to use

Use AudioRecorder for learner-recorded responses — pronunciation practice, verbal commitments, or role-play reflection.

Requires browser MediaRecorder support and explicit consent via consentLabel.

Requirements

  • Learners must check consent before recording.

  • Set maxDurationSeconds to cap clip length.

Try it

Documentation demo

Use the Live demo, React, AI prompt, and Packaging / Manifest tabs below. Embedded demos disable telemetry, xAPI, and the LMS bridge. For production delivery, use the CLI template src/courseConfig.ts and LMS Go-Live.

Open demo in full tab 

<AudioRecorder
  blockId="escalation-script"
  consentLabel="I consent to record audio for this practice exercise only."
  maxDurationSeconds={45}
/>

Copy into Cursor, Copilot, or ChatGPT after the vibe coding starter context:

Read lessonkit.json and src/App.tsx before editing.

Add a AudioRecorder block (H5P-style: Audio Recorder) like this example inside the active <Lesson>:

<AudioRecorder
  blockId="escalation-script"
  consentLabel="I consent to record audio for this practice exercise only."
  maxDurationSeconds={45}
/>

Requirements:
- Import only from @lessonkit/react; use block types from block-catalog.v3.json.
- Keep existing courseId, lessonId, and navigation stable unless I ask to add a lesson.
- After edits, list changed files and what to verify in the browser (lessonkit dev).

Workflow tips: https://lessonkit.readthedocs.io/en/latest/guides/vibe-coding/prompting-and-workflows.html

Touch behavior

Start and Stop recording buttons use lk-button for 44px minimum touch targets when base theme CSS is imported.

See also

  • Essay — typed long-form responses