PinkCrab Jukebox releases
A full-featured WordPress Gutenberg audio jukebox block with queue management, shuffle/repeat controls, track filtering, customizable colors, audio visualizer, and keyboard shortcuts. Perfect for music blogs, artist sites, and audio showcases.
by PinkCrab · github.com/pink-crab/pinkcrab-jukebox · website
Install
The author publishes release zips, so WP-CLI can install straight from GitHub:
wp plugin install https://github.com/pink-crab/pinkcrab-jukebox/releases/download/1.0.0/pinkcrab-jukebox.zipAn audio jukebox block for the WordPress block editor. Requires WordPress 6.0+ and PHP 7.4+.
Installation
Via WP Admin Dashboard
- Upload the archive using the WordPress plugin uploader.
- Activate the plugin through the 'Plugins' menu in WordPress.
- In the block editor, add the Jukebox block to any post or page.
Via FTP
- Extract the archive and upload the
pinkcrab-jukeboxfolder to/wp-content/plugins/. - Activate the plugin through the 'Plugins' menu in WordPress.
- In the block editor, add the Jukebox block to any post or page.
From Source
npm install
npm run buildUse npm run start for development with file watching.
Usage
Add tracks from the media library or enter URLs manually. Each track has a title, artist, album, cover image, audio file, and optional page link.
Keyboard Shortcuts
Active when the jukebox has focus. Press ? to see them in an overlay.
| Key | Action |
|---|---|
Z |
Previous track |
X |
Play |
C |
Pause |
V |
Stop |
B |
Next track |
S |
Toggle shuffle |
R |
Cycle repeat (off / all / one) |
M |
Toggle mute |
Q |
Toggle queue panel |
? |
Show shortcuts overlay |
Left / Right |
Seek ±5 seconds |
Up / Down |
Volume ±10% |
Visualizer
Four modes, cycled via the sidebar button. Uses the Web Audio API with a canvas overlay on the artwork.
| Mode | Style |
|---|---|
| Bars | Frequency bars, green/yellow/red gradient |
| Oscilloscope | Time-domain waveform |
| Mirror | Frequency bars mirrored vertically |
| Fire | Frequency bars with fire gradient |
Requires same-origin audio due to CORS. Cross-origin audio disables the visualizer automatically — playback still works.
Theming
Colors are configured per-block in the editor sidebar and output as CSS custom properties on the .jukebox container:
--jukebox-bg #1a1a2e
--jukebox-primary #e94560
--jukebox-secondary #16213e
--jukebox-text #ffffff
--jukebox-text-muted #a0a0a0
--jukebox-progress-bg #2d2d44
--jukebox-control-hover #ff6b6b
--jukebox-artwork-height 300pxThese can be overridden in your theme CSS. Accepts hex, rgb, rgba, hsl, hsla, var(), and named colors.
License
GPL-2.0-or-later
Releases
4 releases. Each count is every asset in that release; expand a row for the breakdown.