Skip to main content

Manage Project Recordings

This guide explains the directory structure for audio recordings and how to embed the custom player inside Docusaurus markdown.

Directory Structure​

  • recordings/ — Planning notes or metadata files relating to your recordings. These files are not published with the site.
  • static/recordings/ — Audio assets that should be publicly available once the site is built. Files placed here can be reached at /recordings/<filename>.

The project ships with an example file generated during setup:

  • /recordings/example-recording.wav — A short 440 Hz tone (~1.5 seconds).

Adding a New Recording​

  1. Create or export the audio file (recommended format: .wav or .mp3).
  2. Save it to static/recordings/.
  3. Optionally document the recording in recordings/ (e.g., add notes, transcripts, or metadata).
  4. Reference the asset in your docs or blog posts using the AudioPlayer component, or via a plain <audio> element if preferred.

Embedding the Audio Player​

import AudioPlayer from '@site/src/components/AudioPlayer';

<AudioPlayer src="/recordings/my-session.wav" title="Sprint Planning Notes" />

Below is the embedded example using the provided recording:

Example Recording

Audio player loads in the browser.

Example Recording2

Audio player loads in the browser.

The player uses WaveSurfer.js under the hood, providing a compact waveform visualisation, playback controls, and sensible defaults. Pass custom WaveSurfer options via the options prop when you need to adjust styling or behaviour:

<AudioPlayer
  src="/recordings/my-session.wav"
  options={{
    waveColor: '#ffc107',
    progressColor: '#ff9800',
    height: 64,
  }}
/>

For advanced configuration options, see the WaveSurfer options reference and events documentation.