Beats Visualizer for WordPress

Beats Visualizer adds a lightweight, canvas-based audio visualizer to the front end of your WordPress site. It renders responsive, monochrome wave lines that animate in sync with any HTML5 audio player element you supply.

Features

• Responsive full-viewport canvas that keeps lines crisp on high DPI screens.
• Reacts to live playback through the Web Audio API (including autoplay suspension handling).
• Simple [beats_visualizer] shortcode to drop the canvas anywhere on a page or template.
• Minimal styling and script footprint; ships with scoped CSS you can override.

Requirements

• WordPress 6.0 or newer.
• PHP 7.4+ (matches current WordPress minimum recommendations).
• A public-facing HTML5 <audio> element with the ID beats-player-audio.

Installation

1. Copy the beats-visualizer directory into your WordPress site at wp-content/plugins/.
2. In the WordPress admin dashboard, go to Plugins → Installed Plugins and activate Beats Visualizer.

Usage

1. Ensure the page where you want the visualizer includes an audio element:

   <audio id="beats-player-audio" controls>
     <source src="https://example.com/path/to/audio.mp3" type="audio/mpeg" />
   </audio>

   The visualizer listens for this specific ID to hook into the audio stream.

2. Add the shortcode where you would like the animation to appear:

   [beats_visualizer]
   

   The shortcode outputs a full-screen <canvas> inside a fixed-position container (#beats-visualizer-container). By default it sits behind page content via z-index: -1.

3. Play your audio. The visualizer automatically animates when playback starts and eases when paused.

Customization

• Styling: Override the default styles in assets/css/beats-visualizer.css from your theme or a custom plugin. Adjust background color, positioning, or sizing to fit your design.
• Placement: If you prefer an inline visualizer instead of a fixed, full-screen canvas, update the CSS selectors to use relative positioning or wrap the shortcode output in your own container.
• Script tweaks: The visualization logic lives in assets/js/beats-visualizer.js. You can change color, speed, or line configuration by editing the configuration arrays inside BeatsVisualizerInit().

Troubleshooting

• Visualizer not animating? Verify the page includes an <audio> element with the beats-player-audio ID and that the browser has been allowed to start audio playback.
• Seeing a blank white background? That is the plugin’s default canvas color; customize it in the CSS file to match your theme.
• Audio context blocked on page load? Interacting with the page (e.g., clicking play) will resume the Web Audio context automatically.

Development

This plugin does not require a build process. Modify the PHP, JS, or CSS files directly and refresh the page to test updates. Remember to clear caches if your hosting environment uses asset caching.