audio_player_component

A customizable embedded audio player for Flutter with automatic multi-instance coordination. When one player starts, any other active player pauses automatically.

Perfect for news apps, educational platforms, children's apps, or any UI that needs multiple independent audio players on the same screen.

Features

• Automatic Coordination: Ensures only one audio track plays at a time across your entire app.
• Multiple Sizes: Choose between compact, normal, and large layouts to fit your UI needs.
• Playlist Support: Pass a list of AudioTrack objects to enable skip next/previous functionality.
• Expanded Modal Player: Tap on the album cover to open a full-screen modal with rotating animations and advanced controls.
• Seek Controls: Built-in 30-second forward and backward skip buttons, plus a draggable progress bar.

Getting started

Add the dependency to your pubspec.yaml file:

dependencies:
  audio_player_component: ^0.1.0+1

Import the package in your Dart code:

import 'package:audio_player_component/audio_player_component.dart';

Usage

1. Initialize the Coordinator

void main() {
  runApp(const AudioPlayerScope(child: MyApp(),),);
}

2. Add Audio Players to your UI

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Periódico',
      home: Scaffold(
        appBar: AppBar(title: const Text('Últimas noticias')),
        body: ListView(
          padding: const EdgeInsets.all(16),
          children: const [
            Text(
              'Deportes: final de Champions',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            AudioPlayerWidget(
              id: 'noticia-deportes',
              size: PlayerSize.compact,
              playlist: [
                AudioTrack(
                  url:
                      'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
                  title: 'Audio: Deportes',
                  artist: 'Redacción',
                ),
              ],
            ),
            SizedBox(height: 24),

            Text(
              'Economía: subida histórica del mercado',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            AudioPlayerWidget(
              id: 'noticia-economia',
              size: PlayerSize.normal,
              playlist: [
                AudioTrack(
                  url:
                      'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
                  title: 'Parte 1: Apertura de mercados',
                  artist: 'Redacción',
                  coverUrl: 'https://picsum.photos/id/10/200/200',
                ),
                AudioTrack(
                  url:
                      'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
                  title: 'Parte 2: Análisis de expertos',
                  artist: 'Redacción',
                  coverUrl: 'https://picsum.photos/id/10/200/200',
                ),
                AudioTrack(
                  url:
                      'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
                  title: 'Parte 3: Perspectivas',
                  artist: 'Redacción',
                  coverUrl: 'https://picsum.photos/id/10/200/200',
                ),
              ],
            ),
            SizedBox(height: 24),

            Text(
              'Tecnología: nuevo modelo de IA',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            AudioPlayerWidget(
              id: 'noticia-tecnologia',
              size: PlayerSize.large,
              playlist: [
                AudioTrack(
                  url:
                      'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
                  title: 'Audio: Tecnología',
                  artist: 'Redacción',
                  coverUrl: 'https://picsum.photos/id/12/200/200',
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}