Component Preview
Interactive demonstration of the HandPanWrapper component
🎛️ Interactive Controls
Component Overview
Complete drop-in wrapper component with audio management, key selection, size controls, and event logging
This interactive demo allows you to explore all the features and capabilities of the HandPanWrapper component. Use the controls above to modify the component's behavior and see the results in real-time.
API Reference
The HandPanWrapper component provides a comprehensive API for integration into your applications.
Properties: Configure the component with various properties to customize its behavior.
Methods: Programmatically control the component using built-in methods.
Events: Listen to component events to respond to user interactions and state changes.
Component Events
The HandPanWrapper component emits various events that you can listen to:
• Initialization: Fired when the component is ready for use
• Audio Management: Fired when audio settings are changed
• Key Changes: Fired when the musical key is modified
• Size Changes: Fired when the component size is modified
View the Event Log tab to see real-time events as they occur.
Usage Examples
Here are some common ways to use the HandPanWrapper component in your projects:
Basic Usage:<hand-pan-wrapper></hand-pan-wrapper>
With Properties:<hand-pan-wrapper key="D" size="medium"></hand-pan-wrapper>
Event Listeners:wrapper.addEventListener('key-changed', handleKeyChange);