Component Preview
Interactive demonstration of the VUMeter component
🎛️ Interactive Controls
Component Overview
The VUMeter component provides real-time visual representation of audio volume levels, helping users monitor and control audio output levels effectively.
This interactive demo allows you to explore all the features and capabilities of the VUMeter component. Use the controls above to test the component's functionality and see how it integrates with other audio visualization components.
API Reference
The VUMeter component provides a comprehensive API for integration into your applications.
Properties: Configure the component with various properties to customize appearance and meter behavior.
Methods: Programmatically control the VU meter using built-in methods for updating volume levels.
Events: Listen to component events to respond to volume changes and user interactions.
Component Events
The VUMeter component emits various events that you can listen to:
• Volume Change: Fired when the volume level changes
• Peak Level: Fired when the volume reaches peak levels
• Overload Warning: Fired when volume exceeds safe levels
• Meter Update: Fired when the visual meter is refreshed
View the Event Log tab to see real-time events as they occur.
Usage Examples
Here are some common ways to use the VUMeter component in your projects:
Basic Usage:<vumeter></vumeter>
With Properties:<vumeter range="-60-0" threshold="-20"></vumeter>
Event Listeners:vuMeter.addEventListener('volume-change', handleVolumeChange);