Component Preview
Interactive demonstration of the GigsoKeyboard component
🎛️ Interactive Controls
Component Overview
Interactive piano keyboard for note playback and visual feedback
This interactive demo allows you to explore all the features and capabilities of the GigsoKeyboard component. Use the controls above to modify the component's behavior and see the results in real-time.
API Reference
The GigsoKeyboard 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 GigsoKeyboard 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 or stopped
• Octave Changes: Fired when the octave 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 GigsoKeyboard component in your projects:
Basic Usage:<gigso-keyboard></gigso-keyboard>
With Properties:<gigso-keyboard octave="4" size="medium"></gigso-keyboard>
Event Listeners:keyboard.addEventListener('note-played', handleNotePlayed);