hallowebsite Waveform Audio Player
Ein schlanker MP3-Player, der eine echte Wellenform aus deiner Audiodatei zeichnet – mit Playlists, Block und Shortcode. Helles und dunkles Theme sowie CSS-Variablen passen ihn exakt an deine Kadence-Palette an.
Download v1.5.2Überblick
hallowebsite Waveform Audio Player ist ein schlanker MP3-Player mit echter Wellenform deiner Audiodatei, mit Playlists, Block und Shortcode. Die Wellenform wird im Browser aus der tatsächlichen Audiodatei berechnet – und erst, wenn der Player ins Bild scrollt. Gemacht für Musiker, Podcasts, Sprecher-Portfolios und Hörproben. Das flache, minimalistische Design übernimmt die Schrift deines Themes; jede Größe und jede Farbe ist eine CSS-Variable – auch deine Kadence-Palette.
Funktionen
- Gutenberg-Block WavePlayer (Kategorie Medien) und Shortcode
[waveplayer]. - Einzelne Titel oder Playlists mit Trackliste, Vor/Zurück und automatischem Abspielen des nächsten Titels.
- Liest Titel und Interpret bei Mediathek-Dateien aus den ID3-Tags.
- Helles und dunkles Theme, dazu Farb-Abweichungen pro Player (11 Farben) mit Unterstützung der Theme-Palette.
- Alle Größen und Farben als
--wpl-*-Variablen, mit eigenen Variablen für Smartphone-Größen. - Es spielt immer nur ein Player gleichzeitig. Tastatur: Leertaste/Enter startet, Pfeiltasten springen ±5 s.
- Verzögerte Wellenform-Analyse mit sicheren Grenzen – die Wiedergabe funktioniert immer.
Block
- Den Block WavePlayer einfügen.
- Eine oder mehrere MP3s hochladen oder wählen – oder eine URL einfügen. Mehrere Dateien ergeben eine Playlist.
- In der Seitenleiste Titel (Titel, Interpret, Reihenfolge), Playlist-Optionen, Theme, Wellenhöhe und Farben bearbeiten.
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"]| Attribut | Beschreibung |
|---|---|
src | Eine oder mehrere MP3-URLs (kommagetrennt = Playlist). |
id / ids | Anhang-ID(s) aus der Mediathek. |
title, artist | Titelinfos für ein einzelnes src. |
height | Wellenhöhe in px (24–240, Standard 64). |
progress, color | Farbe der gespielten / ungespielten Welle. |
theme | light oder dark. |
list | no blendet die Trackliste aus. |
autonext | no verhindert das automatische Abspielen des nächsten Titels. |
Design & Variablen
Unter Einstellungen → WavePlayer findest du Größen (Radius, Rahmen, Innenabstand, Play-Button, Wellenbalken, Schriften, Playlist), Farben für helles und dunkles Theme mit Live-Vorschau sowie eine vollständige Variablenliste zum Kopieren. Im Customizer gesetzte Variablen haben immer Vorrang:
:root { --wpl-accent: var(--global-palette1); --wpl-bg: var(--global-palette9); }
.dark-section { --wpl-dark-bg: var(--global-palette3); }Benennung: --wpl-* für Größen und helle Farben, --wpl-dark-* für das dunkle Theme, --wpl-mobile-* für Smartphones.
Hinweise
- Dateien auf einer anderen Domain brauchen CORS-Header für die Wellenform – sonst erscheint eine Platzhalter-Welle (die Wiedergabe funktioniert trotzdem).
- Dateien über 20 MiB, Downloads über 20 s oder Titel über 10 Minuten behalten die Platzhalter-Welle.
Changelog
Changed: - Rebranding: neuer Name „hallowebsite Waveform Audio Player“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/waveform-audio-player/ - Keine funktionalen Änderungen.