Component Preview
Interactive demonstration of the CurrentChord component
🎛️ Interactive Controls
Component Overview
The CurrentChord component provides real-time display of the currently selected or playing chord in your musical application.
This interactive demo allows you to explore all the features and capabilities of the CurrentChord component. Use the controls above to test the component's functionality and see how it integrates with other musical components.
API Reference
The CurrentChord component provides a comprehensive API for integration into your applications.
Properties: Configure the component with various properties to customize appearance and chord display behavior.
Methods: Programmatically control the chord display using built-in methods for updating chord information.
Events: Listen to component events to respond to chord changes and user interactions.
Component Events
The CurrentChord component emits various events that you can listen to:
• Chord Change: Fired when the displayed chord changes
• Chord Select: Fired when a chord is selected by the user
• Display Update: Fired when the chord display is refreshed
• Chord Play: Fired when a chord begins playing
View the Event Log tab to see real-time events as they occur.
Usage Examples
Here are some common ways to use the CurrentChord component in your projects:
Basic Usage:<currentchord></currentchord>
With Properties:<currentchord chord="C" quality="major"></currentchord>
Event Listeners:currentChord.addEventListener('chord-change', handleChordChange);