Media · Gutenberg
Audio Player block for WordPress
Custom-styled audio player with cover art, track info, and branded controls. Perfect for podcasts and soundclips.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Custom-styled audio player with cover art, track info, and branded controls. Perfect for podcasts and soundclips.
Inspector panels on this block: Audio File, Track Info, Cover Art, Controls, Player Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Preload” options: Metadata (recommended), Auto (load fully), None (on demand); “Player Style — Style” options: Card, Minimal (bar), Compact; “Box Shadow” options: None, Small, Medium, Large.
Where to find it
Gutenberg inserter → Media → search “Audio Player” (block name `blockenberg/audio-player` in block.json). Style it in the sidebar after insert.
How to use Audio Player block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Audio Player”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Audio File. Set “Audio URL (mp3/ogg/wav)”, “Preload”, “Autoplay”, “Loop”.
- Check the published page. The view script reads HTML data attributes: data-audio-type, data-audio-url, data-autoplay, data-loop, data-preload, data-show-speed, data-show-volume. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Audio URL (mp3/ogg/wav) | Text field in the inspector. Saved as `audioUrl`. |
| Preload | Select control; the chosen value is saved on the block. Options: Metadata (recommended); Auto (load fully); None (on demand). block.json default: metadata. Saved as `preload`. |
| Autoplay | On/off toggle in the inspector. Off by default. Saved as `autoplay`. |
| Loop | On/off toggle in the inspector. Off by default. Saved as `loop`. |
| Track Title | Text field in the inspector. block.json default: Track Title. Saved as `audioTitle`. |
| Artist Name | Text field in the inspector. block.json default: Artist Name. Saved as `audioArtist`. |
| Album | Text field in the inspector. Saved as `audioAlbum`. |
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show Artist | On/off toggle in the inspector. On by default. Saved as `showArtist`. |
| Show Album | On/off toggle in the inspector. Off by default. Saved as `showAlbum`. |
| Show Cover Art | On/off toggle in the inspector. On by default. Saved as `showCover`. |
| Cover Image URL | Text field in the inspector. Saved as `coverUrl`. |
| Cover Size (px) | Numeric range control in the inspector. Range 40–200. block.json default: 80. Saved as `coverSize`. |
| Cover Border Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `coverRadius`. |
| Show Timestamp | On/off toggle in the inspector. On by default. Saved as `showTimestamp`. |
| Show Volume Control | On/off toggle in the inspector. On by default. Saved as `showVolume`. |
| Show Playback Speed | On/off toggle in the inspector. Off by default. Saved as `showSpeed`. |
| Show Download Button | On/off toggle in the inspector. Off by default. Saved as `showDownload`. |
| Play Button Size (px) | Numeric range control in the inspector. Range 32–80. block.json default: 52. Saved as `playButtonSize`. |
| Progress Bar Height (px) | Numeric range control in the inspector. Range 2–12. block.json default: 4. Saved as `progressHeight`. |
| Player Style — Style | Select control; the chosen value is saved on the block. Options: Card; Minimal (bar); Compact. block.json default: card. Saved as `playerStyle`. |
| Box Shadow | Select control; the chosen value is saved on the block. Options: None; Small; Medium; Large. block.json default: md. Saved as `boxShadow`. |
| Player Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 14. Saved as `playerRadius`. |
| Vertical Padding (px) | Numeric range control in the inspector. Range 8–60. block.json default: 20. Saved as `playerPaddingV`. |
| Horizontal Padding (px) | Numeric range control in the inspector. Range 8–60. block.json default: 24. Saved as `playerPaddingH`. |
| Max Width (px) | Numeric range control in the inspector. Range 200–1200. block.json default: 560. Saved as `maxWidth`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-audio-type, data-audio-url, data-autoplay, data-loop, data-preload, data-show-speed, data-show-volume.
When this is the right block
- Custom-styled audio player with cover art, track info, and branded controls. Perfect for podcasts and soundclips — that is the job of Audio Player, not a generic content block.
- Use it when you need the editor control labeled “Audio URL (mp3/ogg/wav)”, which exists on this block’s inspector.
- It matches pages about audio, player, podcast.
- Inserter grouping: video, animation, and rich media sections.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Audio Player block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Audio Player”. It sits under Media. After insert, open Audio File and set “Audio URL (mp3/ogg/wav)”, “Preload”, “Autoplay”, “Loop”.
What makes Audio Player different from other Blockenberg blocks?
Custom-styled audio player with cover art, track info, and branded controls. Perfect for podcasts and soundclips. Inspector labels on this block include “Audio URL (mp3/ogg/wav)”, “Preload”, “Autoplay”, “Loop”.
Is the Audio Player Gutenberg block free?
Yes. Audio Player ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Audio Player to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Audio File, Track Info, Cover Art, Controls).
Related media blocks
Sticky Video
Video player that minimises into a floating corner player when scrolled past, with close and restore controls.
Background Video
A looping autoplay background video section with overlay and InnerBlocks content — distinct from video players or popups.
Before / After Grid
A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout.
Before/After Slider
Compare two images with a draggable slider handle.
Device Mockup
Display a screenshot or image inside a realistic device frame — phone, tablet, laptop, or browser window.
Embed / iFrame
Responsive iframe embed for Calendly, Typeform, Google Forms, Airtable, YouTube, Vimeo, or any URL. Full aspect-ratio control and loading options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Audio Player from the Gutenberg inserter.