RadioPeng Audio Player

A powerful music player plugin that connects to your AzuraCast radio station and displays live metadata including song title, artist, album artwork, DJ information, and listener count.

Screenshot placeholder - replace with actual screenshot

Features

🎵 Live Metadata Display

• Now Playing: Real-time song title and artist information
• Album Artwork: Automatically fetches and displays album art
• DJ Information: Shows current DJ name or "AutoDJ" status
• Listener Count: Live listener statistics updated in real-time
• Auto-Updating: Metadata refreshes every 10 seconds automatically

🎨 Multiple Display Modes

• Standard Player: Full-featured player with all controls and metadata
• Popup Player: Floating button that opens player in a modal
• Online Player: Compact mini-player for sidebars or headers
• Customizable: Each mode can be styled to match your site

🎛️ Player Controls

• Play/Pause: Simple one-click playback control
• Volume Control: Adjustable volume slider
• Mute Button: Quick mute/unmute functionality
• Stream Quality: Automatic adaptive streaming

📱 Responsive Design

• Mobile-Optimized: Works perfectly on all screen sizes
• Touch-Friendly: Large buttons for mobile users
• Adaptive Layout: Automatically adjusts to container width
• Cross-Browser: Compatible with all modern browsers

🔗 AzuraCast Integration

• Easy Setup: Simple configuration with station URL
• Metadata API: Connects to AzuraCast's Now Playing API
• Stream URL: Direct connection to your radio stream
• Reliable: Handles connection errors gracefully

Installation

Automatic Installation

1. Log in to your WordPress admin panel
2. Go to Plugins → Add New
3. Search for "RadioPeng Audio Player"
4. Click Install Now on the RadioPeng Audio Player plugin
5. Click Activate after installation

Manual Installation

1. Download the plugin zip file
2. Go to Plugins → Add New → Upload Plugin
3. Choose the downloaded zip file
4. Click Install Now
5. Click Activate Plugin

Via FTP

1. Download and unzip the plugin file
2. Upload the radiopeng-audio-player folder to /wp-content/plugins/
3. Go to Plugins in WordPress admin
4. Find "RadioPeng Audio Player" and click Activate

Quick Start Guide

1. Configure Your Station

1. Go to Settings → RadioPeng Audio Player
2. Enter your station details:
   • Metadata/Now Playing URL: Your AzuraCast station's API endpoint
     • Example: https://your-station.com/api/nowplaying/your-station-id
   • Stream URL: Your radio stream URL
     • Example: https://your-station.com/radio/8000/radio.mp3
3. Click Save Changes

2. Add Player to Your Site

Add the player to any page or post using shortcodes:

Standard Player:

[azuracast_player]

Popup Button:

[azuracast_player popup="true"]

Compact Online Player:

[azuracast_player type="online"]

3. Customize Appearance (Optional)

Add custom CSS in Appearance → Customize → Additional CSS:

/* Customize player colors */
.radiopeng-player {
    background-color: #your-color;
    border-color: #your-color;
}

/* Customize button colors */
.radiopeng-player .play-button {
    background-color: #your-color;
}

Shortcode Usage

Basic Shortcode

Display standard player:

[azuracast_player]

Popup Player

Show a button that opens player in popup:

[azuracast_player popup="true"]

Custom button text:

[azuracast_player popup="true" button_text="Listen Live"]

Compact Online Player

Display mini player for sidebars:

[azuracast_player type="online"]

Custom Parameters

Combine multiple options:

[azuracast_player type="standard" popup="false"]

Widget Usage

You can also add the player to widget areas:

1. Go to Appearance → Widgets
2. Add a "Text" or "HTML" widget
3. Paste your shortcode
4. Save

Configuration

Settings Page

Access via Settings → RadioPeng Audio Player

Required Settings:

• Metadata/Now Playing URL: AzuraCast API endpoint for current song info
• Stream URL: Direct link to your audio stream

Advanced Settings:

• Update Interval: How often to refresh metadata (default: 10 seconds)
• Default Volume: Initial volume level (0-100)
• Auto-Play: Start playing automatically on page load
• Show Artwork: Display/hide album artwork
• Show DJ Info: Display/hide DJ information
• Show Listeners: Display/hide listener count

Finding Your AzuraCast URLs

Metadata URL:

1. Log into your AzuraCast admin panel
2. Go to your station settings
3. Look for "Public Pages" section
4. Copy the "Now Playing API" URL
5. Format: https://your-domain.com/api/nowplaying/station-shortcode

Stream URL:

1. In AzuraCast, go to station settings
2. Find the "Mount Points" section
3. Copy the public stream URL
4. Format: https://your-domain.com/radio/8000/radio.mp3

Display Modes Comparison

Feature	Standard	Popup	Online
Album Art	✅ Large	✅ Medium	✅ Small
Song Info	✅ Full	✅ Full	✅ Compact
DJ Name	✅ Yes	✅ Yes	✅ Yes
Listeners	✅ Yes	✅ Yes	❌ No
Volume Control	✅ Slider	✅ Slider	✅ Button
Space Required	Large	Button only	Small
Best For	Main page	Sticky header	Sidebar

Styling & Customization

CSS Classes

The plugin uses these CSS classes for styling:

.radiopeng-player          /* Main player container */
.radiopeng-artwork         /* Album artwork */
.radiopeng-info            /* Song information area */
.radiopeng-title           /* Song title */
.radiopeng-artist          /* Artist name */
.radiopeng-dj              /* DJ information */
.radiopeng-listeners       /* Listener count */
.radiopeng-controls        /* Control buttons area */
.play-button               /* Play/pause button */
.volume-control            /* Volume slider */
.radiopeng-popup-button    /* Popup trigger button */
.radiopeng-online          /* Online player mode */

Example Customizations

Dark Theme:

.radiopeng-player {
    background: #1a1a1a;
    color: #ffffff;
    border: 2px solid #333;
}

.play-button {
    background: #10B981;
}

.play-button:hover {
    background: #059669;
}

Rounded Corners:

.radiopeng-player {
    border-radius: 15px;
}

.radiopeng-artwork img {
    border-radius: 10px;
}

Custom Fonts:

.radiopeng-title {
    font-family: 'Your Font', sans-serif;
    font-size: 24px;
    font-weight: bold;
}

Use Cases

Online Radio Stations

• Display now playing information on your website
• Show real-time listener counts
• Promote current DJ shows
• Provide easy access to your stream

Podcast Networks

• Feature your live streams
• Show episode information
• Display host information
• Engage listeners in real-time

Music Venues

• Stream live performances
• Show current band/artist
• Display event information
• Promote upcoming shows

Community Stations

• Share what's playing across your site
• Promote volunteer DJs
• Show listener community size
• Encourage tune-in

Frequently Asked Questions

What is AzuraCast?

AzuraCast is a free, open-source web radio management suite. It handles streaming, playlist management, and provides APIs for metadata. Learn more at azuracast.com.

Do I need AzuraCast to use this plugin?

Yes, this plugin is specifically designed to work with AzuraCast radio stations. It connects to AzuraCast's API for metadata.

Can I use this with other streaming services?

This plugin is designed for AzuraCast. For other services (Icecast, Shoutcast), you would need a different plugin or modifications.

Why isn't the metadata updating?

Check these common issues:

1. Verify your Metadata URL is correct
2. Ensure your AzuraCast station is running
3. Check browser console for errors
4. Verify CORS is enabled in AzuraCast

Can I customize the player appearance?

Yes! Use custom CSS to style the player. See the "Styling & Customization" section above.

Does it work on mobile devices?

Yes! The player is fully responsive and works on all devices.

Can I have multiple players on one page?

Yes, but they will all control the same stream. Only one instance should play at a time.

How do I change the update interval?

Go to Settings → RadioPeng Audio Player and adjust the "Update Interval" setting.

Will this slow down my site?

No. The plugin is lightweight and uses efficient API calls. Metadata updates happen asynchronously.

Troubleshooting

Metadata Not Displaying

1. Check API URL: Make sure it's formatted correctly
2. Test API: Visit the URL in your browser - you should see JSON data
3. CORS Settings: Enable CORS in AzuraCast settings
4. Browser Console: Check for JavaScript errors

Audio Not Playing

1. Stream URL: Verify the stream URL is correct
2. Format Support: Ensure browser supports your audio format (MP3, AAC, etc.)
3. HTTPS: If your site uses HTTPS, stream must also be HTTPS
4. Firewall: Check if firewall is blocking the stream

Album Art Not Showing

1. Metadata: Verify AzuraCast has album art for the song
2. CORS: Ensure images can be loaded cross-origin
3. URL Format: Check if image URLs are valid

Support

Need help? We're here for you!

• Documentation: https://wonkodev.com/docs/radiopeng-audio-player
• Support Forum: https://wonkodev.com/support
• Email: support@wonkodev.com
• GitHub Issues: https://github.com/madwonko/radiopeng-audio-player/issues

Contributing

Contributions are welcome! Here's how you can help:

1. Report Bugs: Open an issue on GitHub with details
2. Suggest Features: Share your ideas in the issues
3. Submit Pull Requests: Fork, improve, and submit PRs
4. Translate: Help translate the plugin
5. Test: Try beta versions and report issues

Development Setup

# Clone the repository
git clone https://github.com/madwonko/radiopeng-audio-player.git

# Navigate to plugin directory
cd radiopeng-audio-player

# Create a symlink to your WordPress plugins folder
ln -s $(pwd) /path/to/wordpress/wp-content/plugins/radiopeng-audio-player

Changelog

Version 1.2.0 (2025-02-07)

• ✨ Added popup player mode
• ✨ Added compact online player mode
• 🎨 Improved responsive design
• 🐛 Fixed volume control on mobile
• ⚡ Optimized metadata refresh performance
• 📱 Better mobile touch controls

Version 1.1.0 (2024)

• ✨ Added listener count display
• ✨ Added DJ information
• 🎨 Improved album artwork display
• 🐛 Fixed Safari audio playback issues

Version 1.0.0 (2024)

• 🎉 Initial release
• ✅ Live metadata display
• ✅ Album artwork support
• ✅ Play/pause controls
• ✅ Volume control
• ✅ Auto-updating metadata
• ✅ AzuraCast integration

Roadmap

Planned Features

• [ ] History/recently played tracks
• [ ] Favorites/like button
• [ ] Social sharing
• [ ] Schedule display
• [ ] Request system integration
• [ ] Multiple station support
• [ ] Visualizer/spectrum analyzer
• [ ] Sleep timer
• [ ] Chromecast support
• [ ] Offline notification

Credits

Author: MadWonko
Website: https://wonkodev.com
GitHub: @madwonko

Special Thanks:

• AzuraCast team for their excellent radio platform
• WordPress community for support and feedback

License

This plugin is licensed under the GPL v2 or later.

RadioPeng Audio Player - WordPress Plugin
Copyright (C) 2025 MadWonko

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

Show Your Support

If you find this plugin useful, please:

• ⭐ Star this repository on GitHub
• 📝 Write a review on WordPress.org
• 🐦 Share it on social media
• ☕ Buy me a coffee

---

Made with ♥ by MadWonko | Website | More Plugins | Support