Adding Custom Sound Effects to a Flutter Mobile App

Photo by Manuel Sardo on Unsplash

In mobile applications, sound effects can be used to communicate information and provide audible feedback to a user. In addition to a great visual design and user flow, sound effects can enhance a user’s experience by tapping into a completely separate human sense.

If you’re looking to add custom sound effects to your Flutter application, I recommend looking to AudioPlayers to assist in providing this functionality. AudioPlayers, a third-party Flutter package, enables developers to easily add sound effects into their apps. It provides methods to play/pause, loop, seek, and more. And, perhaps most-importantly, it’s compatible on both Android and iOS.

In this post, we’ll go through the process of adding custom sound effects to a basic Flutter mobile app using AudioPlayers. For the sake of this walk-through, these sound effects will come from two places: a local asset in the project itself and a remote file on the Internet.

Assuming that we already have a basic Flutter app created, we can begin by opening up the pubspec.yaml file and adding the AudioPlayers dependency. In Flutter, package dependencies go in this file in the dependencies section. Underneath the default Cupertino Icons dependency, we can add: audioplayers: ^0.13.2 (which is currently the latest version). Note that indentation matters in YAML, so keep that in mind when working in this file.

Further down in this file, in the Flutter-specific section, we need to add a reference to each custom sound that will live in the app. However, before we can reference the sound file, we need to add it to the project. We can do this by creating an assets folder at the root of the project and adding the sound file to it. Once the file is in the project, we can add a reference to it in the pubspec file. In the Flutter-specific section, below the default reference to Material Icons (uses-material-design: true), we can add something like:

assets:
  - assets/myCustomSoundEffect.mp3

Also, if we wanted to reference more than one custom sound effect, we would simply repeat the second line with the location and name of the file that we wanted to add.

Now that we have an AudioPlayers dependency and a reference to the local asset, we can move onto the Dart file in which we’re going to invoke the sound effect.

In main.dart (or whichever file we plan on calling the sound effect), we first need to add a couple imports from the AudioPlayers package. These imports should look something like:

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

Then, in the method in which we want to play the sound effect (e.g. in the onPressed event of a button), we can declare a new instance of the AudioCache class that we imported and call its play method. For example:

Future<AudioPlayer> playLocalAsset() async {
    AudioCache cache = new AudioCache();
    return await cache.play("myCustomSoundEffect.mp3");
}

We could also call AudioCache’s loop method, which will play the sound repeatedly until it is stopped. Both the play and loop methods return an instance of the AudioPlayer class, which has methods to pause, resume, stop, etc. the sound that is played/looped by the AudioCache.

We can also play audio files that are hosted somewhere on the Internet, as mentioned before. However, these files do have a delay before playing (and require an Internet connection), so keep that in mind when deciding where these audio files should live.

Similar to how local assets are played using the AudioCache class, remote audio files are played using the AudioPlayer class (the same type returned by the play and loop methods mentioned above).

In a method similar to playLocalAsset in the previous example, we can declare a new instance of the AudioPlayer class and call its play method. For example:

void playRemoteFile() {
    AudioPlayer player = new AudioPlayer();
    player.play("https://bit.ly/2CH50TO");
}

Now that we are using the AudioPlayer to play the sound, we can use this same object to call pause, resume, stop, etc. (rather than using the object that’s returned in AudioCache's version of the play method).

As mentioned previously, AudioPlayers provides much more functionality in working with custom sounds, including jumping (seeking) to a specific spot in the file, adjusting volume, and more, all of which can be explored on the project’s Github.

There are a few other Flutter packages out there that exist to provide similar functionality to AudioPlayers, but not all of them are compatible on both Android and iOS, nor do they all provide support for both local assets and remote files. However, many of them are open-source, so that could always change. Most importantly, you should define and prioritize what you’re looking for in a package before choosing one.

For more example usage of AudioPlayers, check out this sample project on Github.