Component Preview
Interactive demonstration of the PianoRoll component
🎛️ Interactive Controls
Component Overview
Visual timeline interface for arranging and playing chord progressions
This interactive demo allows you to explore all the features and capabilities of the PianoRoll component. Use the controls above to modify the component's behavior and see the results in real-time.
API Reference
The PianoRoll 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 like play(), stop(), and clear().
Events: Listen to component events to respond to user interactions and state changes.
Component Events
The PianoRoll component emits various events that you can listen to:
• Initialization: Fired when the component is ready for use
• Playback Events: Fired when playback starts, stops, or encounters errors
• User Interaction: Fired when users interact with the timeline
• Tempo Changes: Fired when the tempo 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 PianoRoll component in your projects:
Basic Usage:<pianoroll></pianoroll>
With Properties:<pianoroll tempo="120" time-signature="4/4"></pianoroll>
Event Listeners:pianoroll.addEventListener('play', handlePlay);