Audio library player with waveform visualisation

Project brief

Give editors a simple way to add audio demonstrations to site content while providing visitors with a fast, consistent player and visual track positioning.

What was delivered

• multiple shortcodes for embedding audio players in WordPress content
• waveform rendering with WaveSurfer.js
• precomputed JSON peak data instead of calculating waveforms on every page load
• play, pause, time display and click-to-seek waveform controls
• automatic stopping of the previous player when another starts
• settings for height, bars, colours, cursor, progress, controls and timer
• TinyMCE editor button for inserting players

My role

Developed the WordPress plugin, shortcode integration, client-side playback logic, waveform data preparation and presentation settings.

Outcome

Editors gained controlled insertion of audio demonstrations, while visitors received a consistent set of fast waveform players across the live catalog.

Verification

• Live website
• The delivered functionality has been confirmed by the owner.