Component Preview
Interactive demonstration of the Chromatic Tuner component
🎛️ Interactive Controls
Component Overview
The Chromatic Tuner component provides precise instrument tuning functionality with real-time frequency detection and visual feedback.
This interactive demo allows you to explore all the features and capabilities of the Chromatic Tuner component. Use the controls above to configure the tuner for different instruments and adjust sensitivity settings for optimal tuning accuracy.
API Reference
The Chromatic Tuner component provides a comprehensive API for integration into your applications.
Properties: Configure the component with various properties to customize tuning behavior and sensitivity.
Methods: Programmatically control the tuner using built-in methods for starting/stopping detection and setting reference frequencies.
Events: Listen to component events to respond to pitch detection and tuning status changes.
Component Events
The Chromatic Tuner component emits various events that you can listen to:
• Pitch Detection: Fired when the tuner detects a pitch from audio input
• Tuning Status: Fired when notes are in tune or need adjustment
• Reference Change: Fired when the reference frequency is updated
• Calibration: Fired when the tuner calibrates to a new instrument
View the Event Log tab to see real-time events as they occur.
Usage Examples
Here are some common ways to use the Chromatic Tuner component in your projects:
Basic Usage:<chromatictuner></chromatictuner>
With Properties:<chromatictuner reference="440" sensitivity="high"></chromatictuner>
Event Listeners:tuner.addEventListener('pitchdetected', handlePitchDetection);