Login

Audio Player with Visualization

Embedding Audio

The Audio component lets you embed playable audio files with an interactive frequency visualization. This is useful for podcasts, music, voice notes, or any audio-based content.

Basic Audio Player

Here's an example audio player. Click play to listen, and watch the frequency visualization (if enabled). Hover over the visualization to see real-time frequency data:

Audio Without Visualization

You can disable the visualization if you prefer a simpler player:

How to Add Audio Files

Audio files should be stored in static/audio/. Since audio files can be large, this project uses Git LFS (Large File Storage) to manage them efficiently.

Supported Audio Formats

Use standard web-compatible audio formats:

  • MP3 (.mp3) — Wide browser support, good compression
  • OGG Vorbis (.ogg) — Open format, good quality
  • WAV (.wav) — Uncompressed, large file sizes
  • WebM (.webm) — Modern format with good compression

The Frequency Visualization

When showVisualization is true, the player displays a real-time frequency spectrum as the audio plays. The visualization uses the Web Audio API's AnalyserNode to compute frequency data from the audio stream.

Audio Controls

The player provides standard controls:

  • Play/Pause: Toggle playback with the central button
  • Progress Bar: Click or drag to seek through the audio
  • Time Display: Shows current time and total duration
  • Volume Control: Adjust playback volume with the slider

Combining with Other Content

Audio players work well alongside other content. You could use them to:

  • Provide audio commentary on your written posts
  • Share music samples or compositions
  • Embed podcast clips or voice recordings
  • Create multimedia tutorials with narration