Component Preview
Interactive demonstration of the TransportControls component
🎛️ Interactive Controls
Component Overview
The TransportControls component provides a unified interface for managing audio and video playback controls.
This interactive demo allows you to explore all the features and capabilities of the TransportControls component. Use the controls above to test different playback speeds and control the transport state.
API Reference
The TransportControls component provides a comprehensive API for integration into your applications.
Properties: Configure the component with various properties to customize playback behavior and appearance.
Methods: Programmatically control the transport using built-in methods for play, pause, stop, and loop functionality.
Events: Listen to component events to respond to playback state changes and user interactions.
Component Events
The TransportControls component emits various events that you can listen to:
• Playback Start: Fired when playback begins
• Playback Pause: Fired when playback is paused
• Playback Stop: Fired when playback is stopped
• Loop Toggle: Fired when loop mode is enabled/disabled
• Speed Changes: Fired when playback speed 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 TransportControls component in your projects:
Basic Usage:<transportcontrols></transportcontrols>
With Properties:<transportcontrols speed="1.5" show-loop="true"></transportcontrols>
Event Listeners:transport.addEventListener('playback-start', handlePlaybackStart);