How to add custom sound effects to a Flutter mobile app?

• General

Sound effects in mobile applications can be used to convey information and provide auditory feedback to the user. So, in this post, we’ll go through how to add custom sound effects to a Flutter mobile app.

How to add custom sound effects to a Flutter mobile app?

If you want to add custom sound effects to your Flutter application, you can use AudioPlayers. AudioPlayers Flutter package that allows developers to easily add sound effects to their applications. It will provide various options such as play/pause, loop, search, and other methods. And, most importantly, it is compatible with both Android and iOS.

To play local files:

Let’s say you already have created a Flutter app. Now you have to open pubspec.yaml file and add AudioPlayers dependency. In Flutter, package dependencies are placed in the dependencies section. Under the default Cupertino icon dependency you can add: audioplayers: ^ 0.19.1 (latest version). Also, keep in mind that indentation is important in YAML.

Further, you need to add a reference for each custom sound that will live in the app. However, before adding the reference to the sound file, you need to add it to the project. You can do this by creating an assets folder. This will be created at the root of the project and you can add the sound file to it. Once the file is in the project, 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), you can add something like this:

assets:
- assets/myCustomSoundEffect.mp3

But what if you want to reference more than one custom sound effect? In that case, you would simply have to repeat the second line with the location and name of the file that you wanted to add. Now you have both AudioPlayers dependency and a reference. You can move onto the Dart file in which the sound effect will be invoked. In the main.dart you need to add few imports from the AudioPlayers package. These imports should be similar to:

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

You can also call AudioCache’s loop method. It will simply play the sound repeatedly until it is stopped. It has methods to pause, resume, and stop the sound that is played/looped by the AudioCache.

To play remote files:

Users can also play audio files that are available somewhere on the internet. However, these files show some delay before playing. So, always keep it in mind when deciding where these audio files should live. Remote audio files can also be played using the AudioPlayer class (the same type returned by the play & loop methods). In the method playLocalAsset, you can declare an instance of the AudioPlayer class. Later you can call its play method. Take a look at the below example:

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

Now you are using the AudioPlayer to play the sound. You can also use this same object to call pause, resume, stop, etc. AudioPlayers also provides much more functionality in working with custom sounds. This includes jumping (seeking) to a specific spot in the file, adjusting volume, and much more.

There are many other Flutter packages that provide similar functionality to AudioPlayers. But not all of them are compatible on both Android as well as iOS. Also, other packages don’t provide support for both local assets and remote files. However, many of them are open-source, so they could be changed.

Conclusion:

Thanks for remaining with us till the end of the article. So, in this article, we have seen how to add custom sound effects to a Flutter mobile app. We hope you have enjoyed reading this article. Also, feel free to comment with your suggestions and feedback.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.