hallowebsite Waveform Audio Player

Overview

hallowebsite Waveform Audio Player is a slim MP3 player that shows a real waveform of your audio, with playlists, a block and a shortcode. The waveform is calculated in the browser from the actual audio file, and only when the player scrolls into view. It's built for musicians, podcasts, voice-over portfolios and audio samples. The flat, minimal design uses your theme font. Every size and colour is a CSS variable, including your Kadence palette.

Features

• Gutenberg block WavePlayer (category Media) and the shortcode [waveplayer].
• Single tracks or playlists, with a track list, previous/next and auto-play of the next track.
• Reads title and artist from ID3 tags for Media Library files.
• Light and dark themes, plus per-player colour overrides (11 colours) with theme palette support.
• All sizes and colours as --wpl-* variables, with mobile size variables.
• Only one player plays at a time. Keyboard: Space/Enter plays, arrow keys seek ±5 s.
• Lazy waveform analysis with safe limits. Playback always works.

Block

1. Add the block WavePlayer.
2. Upload or pick one or more MP3s, or insert a URL. Several files become a playlist.
3. In the sidebar, edit the tracks (title, artist, order), playlist options, theme, waveform height and colours.

Shortcode

[waveplayer src="https://example.com/song.mp3" title="Night Drive" artist="hallowebsite"]
[waveplayer id="123"]
[waveplayer ids="12,13,14"]
[waveplayer src="https://…/a.mp3,https://…/b.mp3" list="no"]

Attribute	Description
src	One or more MP3 URLs (comma-separated = playlist).
id / ids	Media Library attachment ID(s).
title, artist	Track info for a single src.
height	Waveform height in px (24–240, default 64).
progress, color	Played / unplayed wave colour.
theme	light or dark.
list	no hides the track list.
autonext	no stops auto-playing the next track.

Design & variables

Settings → WavePlayer covers sizes (radius, border, padding, play button, waveform bars, fonts, playlist), colours for the light and dark theme with a live preview, and a complete variable list to copy. Variables set in the Customizer always win:

:root { --wpl-accent: var(--global-palette1); --wpl-bg: var(--global-palette9); }
.dark-section { --wpl-dark-bg: var(--global-palette3); }

Naming: --wpl-* for sizes and light colours, --wpl-dark-* for the dark theme, --wpl-mobile-* for phones.

Notes

• Files on another domain need CORS headers for the waveform. Otherwise a placeholder wave appears (playback still works).
• Files over 20 MiB, downloads over 20 s or tracks over 10 minutes keep the placeholder wave.

Changed:
- Rebranding: neuer Name „hallowebsite Waveform Audio Player“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/waveform-audio-player/
- Keine funktionalen Änderungen.