How to Add Audio File in Flutter Application?

Flutter is a well-known tool for developing cross-platform applications. It is considered a good choice among developers because of the single code base policy for all types of OS and devices. Flutter engine provides support for a vast library and file types, making it easy to develop beautiful UI by adding fonts, images, and widgets.

Flutter engine doesn't support audio files, hence playing audio is not as easy as viewing the image from the assets folder. Every cloud has a silver lining - but no worries, Flutter provides the solution too. Many plugins can be integrated within the app to play audio. In this article, we will learn to use the audio files from the asset folder using the audioplayers plugin.

Step-by-Step Implementation of Audio Player Application

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Project Structure

Step 2: Adding the Dependency

To add the dependency to the pubspec.yaml file, add audioplayers as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Now, run the below command in the terminal.

flutter pub get

Or

Run the below command in the terminal.

flutter pub add audioplayers

As the project is created, you will find the main.dart file inside the lib folder, create an assets folder as mentioned in the above project structure. Also, upload any audio name ringtone.mp3 and image name placeholder.png to the assets folder. Import the asset in pubspec.yaml.

flutter:
 assets:
 - assets/ringtone.mp3

Or you can run the following command to load the dependency.

flutter pub get

Step 3: Code for main.dart

The UI consists of a static image and buttons to play and stop audio. The code integrates the functions _playAudio and _stopAudio from the plugin to play and stop the audio file.

main.dart:

Step 4: Run the application

Save the project and enter below command to run the application.

flutter run

Output: