Component Preview
Interactive demonstration of the ScaleKey component
🎛️ Interactive Controls
Component Overview
The ScaleKey component provides comprehensive scale and key selection functionality for musical applications.
This interactive demo allows you to explore all the features and capabilities of the ScaleKey component. Use the controls above to test the component's functionality and see how it integrates with other musical components.
API Reference
The ScaleKey component provides a comprehensive API for integration into your applications.
Properties: Configure the component with various properties to customize scale and key selection behavior.
Methods: Programmatically control the component using built-in methods for scale generation and key management.
Events: Listen to component events to respond to scale and key changes.
Component Events
The ScaleKey component emits various events that you can listen to:
• Scale Changes: Fired when a new scale is selected or generated
• Key Changes: Fired when the musical key is modified
• Pattern Updates: Fired when scale patterns are updated
• Instrument Changes: Fired when the target instrument is switched
View the Event Log tab to see real-time events as they occur.
Usage Examples
Here are some common ways to use the ScaleKey component in your projects:
Basic Usage:<scalekey></scalekey>
With Properties:<scalekey key="C" scale="major" instrument="guitar"></scalekey>
Event Listeners:scaleKey.addEventListener('scale-changed', handleScaleChange);