Using the audioplayers Package for Playing Audio Files in Flutter

Flutter, Google’s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, offers numerous packages to extend its functionality. Among these, the audioplayers package is highly regarded for playing audio files. This blog post delves into how to effectively use the audioplayers package in Flutter to implement audio playback in your applications.

What is the audioplayers Package?

The audioplayers package is a Flutter plugin that provides a simple and effective way to play audio files in your Flutter apps. It supports a wide range of audio formats and offers functionalities like playing, pausing, stopping, looping, and seeking audio, making it a versatile choice for various audio playback requirements.

Why Use audioplayers in Flutter?

• Ease of Use: Simple API that makes audio playback implementation straightforward.
• Cross-Platform: Supports both Android and iOS platforms.
• Versatile Features: Includes features like looping, volume control, playback speed, and seeking.
• Multiple Audio Sources: Supports playing audio from local files, assets, and network URLs.

How to Implement Audio Playback Using audioplayers in Flutter

To get started with the audioplayers package, follow these steps:

Step 1: Add the Dependency

First, add the audioplayers package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  audioplayers: ^5.2.1 # Use the latest version

Then, run flutter pub get in your terminal to install the package.

Step 2: Import the Package

In your Dart file, import the audioplayers package:

import 'package:audioplayers/audioplayers.dart';

Step 3: Create an AudioPlayer Instance

Create an instance of the AudioPlayer class:

final player = AudioPlayer();

Step 4: Load and Play Audio

Load and play audio from different sources:

Playing Audio from a Local File

Future playLocalAudio() async {
  final path = 'assets/audio/sample.mp3'; // Path to your local audio file
  await player.play(AssetSource(path));
}

Make sure to include the audio file in your assets directory and specify it in the pubspec.yaml file:

flutter:
  assets:
    - assets/audio/sample.mp3

Playing Audio from a Network URL

Future playNetworkAudio() async {
  final url = 'https://example.com/audio/sample.mp3'; // URL of the audio file
  await player.play(UrlSource(url));
}

Step 5: Control Playback

Control the playback with the following methods:

• Pause Audio:

Future pauseAudio() async {
  await player.pause();
}

• Stop Audio:

Future stopAudio() async {
  await player.stop();
}

• Resume Audio:

Future resumeAudio() async {
  await player.resume();
}

• Seek to a Specific Position:

import 'package:flutter/material.dart';

Future seekAudio() async {
  Duration position = const Duration(seconds: 30); // Seek to 30 seconds
  await player.seek(position);
}

• Set Volume:

Future setVolume() async {
  await player.setVolume(0.5); // Set volume to 50%
}

• Set Playback Rate:

Future setPlaybackRate() async {
  await player.setPlaybackRate(1.5); // Play at 1.5x speed
}

• Enable Looping:

Future setLooping() async {
  await player.setReleaseMode(ReleaseMode.loop); // Loop the audio
}

Step 6: Handle Playback Events

Listen for playback events to update the UI or handle specific actions:

void setupAudioPlayerListeners() {
  player.onPlayerStateChanged.listen((PlayerState state) {
    print('PlayerState: $state');
  });

  player.onDurationChanged.listen((Duration duration) {
    print('Duration: $duration');
  });

  player.onPositionChanged.listen((Duration position) {
    print('Position: $position');
  });

  player.onPlayerComplete.listen((event) {
    print('Playback completed');
  });

  player.onSeekComplete.listen((event){
    print("Seek Completed");
  });
}

Example Flutter Code

Here’s a simple example demonstrating how to use the audioplayers package in a Flutter app:

import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  final player = AudioPlayer();

  @override
  void initState() {
    super.initState();
    setupAudioPlayerListeners();
  }

    void setupAudioPlayerListeners() {
    player.onPlayerStateChanged.listen((PlayerState state) {
      print('PlayerState: $state');
    });

    player.onDurationChanged.listen((Duration duration) {
      print('Duration: $duration');
    });

    player.onPositionChanged.listen((Duration position) {
      print('Position: $position');
    });

     player.onPlayerComplete.listen((event) {
      print('Playback completed');
    });
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AudioPlayer Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () async {
                  final path = 'assets/audio/sample.mp3';
                  await player.play(AssetSource(path));
                },
                child: const Text('Play Local Audio'),
              ),
              ElevatedButton(
                onPressed: () async {
                  final url = 'https://example.com/audio/sample.mp3';
                  await player.play(UrlSource(url));
                },
                child: const Text('Play Network Audio'),
              ),
              ElevatedButton(
                onPressed: () async {
                  await player.pause();
                },
                child: const Text('Pause Audio'),
              ),
              ElevatedButton(
                onPressed: () async {
                  await player.stop();
                },
                child: const Text('Stop Audio'),
              ),
               ElevatedButton(
                onPressed: () async {
                    Duration position = const Duration(seconds: 30); // Seek to 30 seconds
                    await player.seek(position);
                },
                child: const Text('Seek Audio'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    player.dispose();
    super.dispose();
  }
}

Make sure to replace 'assets/audio/sample.mp3' with the correct path to your local audio file and 'https://example.com/audio/sample.mp3' with a valid audio URL.

Advanced Usage

Caching Network Audio

For a better user experience, consider caching network audio. While audioplayers doesn’t provide caching directly, you can use other packages like flutter_cache_manager to cache the audio file and then play it locally.

import 'package:audioplayers/audioplayers.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';

Future playCachedNetworkAudio() async {
  final url = 'https://example.com/audio/sample.mp3';
  final file = await DefaultCacheManager().getSingleFile(url);

  if (file != null) {
    await player.play(DeviceFileSource(file.path));
  } else {
    print('Failed to load audio from cache');
  }
}

Handling Errors

It’s essential to handle potential errors during audio playback. You can use try-catch blocks to catch exceptions and handle them gracefully.

Future playAudioWithErrorHandling() async {
  try {
    final url = 'https://example.com/audio/sample.mp3';
    await player.play(UrlSource(url));
  } catch (e) {
    print('Error playing audio: $e');
    // Handle the error appropriately, e.g., show an error message to the user
  }
}

Conclusion

The audioplayers package is a powerful and easy-to-use solution for adding audio playback functionality to your Flutter applications. By following the steps outlined in this guide, you can seamlessly integrate audio playback from local files, assets, and network URLs. With its versatile features and straightforward API, audioplayers is an excellent choice for enhancing your Flutter apps with rich audio experiences. Always ensure you handle playback events and errors to provide a smooth user experience.