How to Play a Custom Sound in Flutter

How to Play a Custom Sound in Flutter?

Playing custom sounds is a common feature in mobile apps, whether for notifications, alerts, or background music. In Flutter, this is relatively easy to implement with the help of some plugins. In this tutorial, we will go step by step to show you how to play a custom sound in your Flutter app.

Prerequisites

Before we start, ensure you have:

Flutter installed on your machine
A Flutter project set up
A custom sound file (in .mp3, .wav, or .ogg format)

Step 1: Add the Required Dependencies

We will use the audioplayers package, which is a powerful and flexible plugin to play audio files in Flutter. To add this package, open your pubspec.yaml file and add the following dependency:

dependencies:
  audioplayers: ^1.0.1  # Use the latest version available

Run the following command to install the package:

flutter pub get

Step 2: Prepare Your Custom Sound File

Place your custom sound file in the assets folder of your Flutter project.
If the assets folder does not exist, create it.
For this example, let’s assume your file is named notification.mp3 and is located at assets/sounds/notification.mp3.

Now, update the pubspec.yaml file to include the sound file as an asset:

flutter:
  assets:
    - assets/sounds/notification.mp3

Step 3: Write the Code to Play the Sound

Open the Dart file where you want to play the sound (e.g., main.dart), and import the audioplayers package:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SoundPlayerScreen(),
    );
  }
}

class SoundPlayerScreen extends StatefulWidget {
  @override
  _SoundPlayerScreenState createState() => _SoundPlayerScreenState();
}

class _SoundPlayerScreenState extends State<SoundPlayerScreen> {
  // Create an instance of the audio player
  final AudioPlayer _audioPlayer = AudioPlayer();

  // Function to play the custom sound
  void _playSound() async {
    try {
      // Load and play the sound file
      await _audioPlayer.play(AssetSource('sounds/notification.mp3'));
    } catch (e) {
      print("Error playing sound: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Play Custom Sound'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _playSound,
          child: Text('Play Sound'),
        ),
      ),
    );
  }

  @override
  void dispose() {
    // Dispose of the audio player when not in use
    _audioPlayer.dispose();
    super.dispose();
  }
}

Step 4: Understanding the Code

Importing the Package: The audioplayers package is imported to manage audio playback.
Creating an AudioPlayer Instance: We create an instance of AudioPlayer which handles all audio-related operations.
_playSound() Method: The _playSound method uses the play() function to load and play the audio file.
UI Component: A simple button triggers the sound playback when clicked.

Step 5: Run Your App

Run your app on a physical device or an emulator:

flutter run

Click the “Play Sound” button, and your custom sound should play. If it doesn’t, check the console for any error messages.

Step 6: (Optional) Advanced Features

The audioplayers package offers more than just basic playback. Here are some additional features you can implement:

Pause, Resume, and Stop PlaybackdartCopy code// Pause _audioPlayer.pause(); // Resume _audioPlayer.resume(); // Stop _audioPlayer.stop();
Looping the SoundYou can make the sound loop by enabling the setReleaseMode method:dartCopy code_audioPlayer.setReleaseMode(ReleaseMode.loop);
Adjust VolumeYou can control the playback volume using the setVolume method. Volume ranges from 0.0 (mute) to 1.0 (maximum).dartCopy code_audioPlayer.setVolume(0.5); // Set volume to 50%
Seek to a Specific PositionUse the seek method to play the sound from a specific position:dartCopy codeDuration position = Duration(seconds: 10); _audioPlayer.seek(position);

Step 7: Testing Tips

Ensure your sound file is correctly included in the pubspec.yaml and in the right directory.
Check the console for any errors during development, which might indicate issues with loading the asset.
Make sure your emulator or physical device is not in silent mode.

Conclusion

Playing custom sounds in Flutter is straightforward with the help of the audioplayers package. Whether you are building a game, an alert system, or simply adding sound effects, this package can handle your needs with ease. Experiment with the additional features mentioned to customize the playback experience further.

We hope this guide helps you integrate custom sound playback into your Flutter projects. Happy coding!

Explore Other Flutter Topics…

Tagged How do you add custom sounds to flutter?, How to Play a Custom Sound in Flutter