Component Preview
Interactive demonstration of the HandPan component
🎛️ Interactive Controls
Component Overview
Interactive hand pan (hang drum) instrument for touch-screen play with soothing synthesized tones
This interactive demo allows you to explore all the features and capabilities of the HandPan component. Use the controls above to modify the component's behavior and see the results in real-time.
🎹 Keyboard Controls
You can play the handpan using your computer keyboard:
- Number Keys 1-8: Play the corresponding notes
- Key 1: 12 o'clock position (top)
- Keys 2-8: Proceed clockwise around the handpan
- Multiple Keys: Press multiple number keys simultaneously for chords
API Reference
The HandPan 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 HandPan component emits various events that you can listen to:
• Initialization: Fired when the component is ready for use
• Note Playback: Fired when notes are played
• Key Changes: Fired when the musical key is modified
• Scale Changes: Fired when the scale type 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 HandPan component in your projects:
Basic Usage:<hand-pan></hand-pan>
With Properties:<hand-pan key="D" scale="minor" size="medium"></hand-pan>
Event Listeners:handPan.addEventListener('note-played', handleNotePlayed);