Audio Player
Description
The Audio Player component is a versatile and user-friendly audio playback solution designed for Storyblok projects. It provides a sleek interface for playing audio files, complete with play/pause functionality, a progress bar, and time display. This component is ideal for podcasts, music samples, or any other audio content that needs to be embedded in your Storyblok pages.
Installation
bash
sabaccui add audioPlayer
Usage
Here's an example of how to use the Audio Player component in a Storyblok block:
Preview
00:00
Music by Alex_Kizenkov from Pixabay
Schema
| Field | Type | Description | Default |
|---|---|---|---|
media | asset | The audio file to be played. Only accepts audio file types. | Required, no default |
Notes
- The component uses icons for play and pause buttons, which are included in the component files.
- The audio player supports metadata preloading for improved performance.
- The progress bar is interactive, allowing users to skip to different parts of the audio by clicking.
- Time display shows the remaining time of the audio track.
Best Practices
- Ensure that the audio file is in a compatible format (MP3 is recommended for broad browser support).
- Optimize audio file size to balance quality and load times, especially for mobile users.
- Test the component across different devices and browsers to ensure consistent functionality and appearance.