How to play Music / Audio in Flutter App | Flutter Music Player | Dart

Today we will be knowing about how we can play music in our flutter app. We will be making a flutter music player app using some simple steps. This blog will be guiding you to play audio in your flutter app.

Table of Contents

S.N	Contents
1.	Introduction
2.	Objective of the Blog
3.	Creating a flutter music player a. Installation b. Importing the audio file to our project c. Adding audio in Flutter App
4.	Xylophone app

Introduction

Flutter has been one of the most popular platform for making apps in 2020-2021. It is an open-source UI software development kit created by Google. It is used to develop cross platform applications for Android, iOS, Linux, Mac, Windows, and the web from a single codebase. It is easy to use and has tons of libraries which helps in making apps easily and efficiently.

We will be using Audio Players package by fireslime.xyz to play audio in our app. Audio Players is a Flutter plugin to play multiple simultaneously audio files, works for Android, iOS, macOS and web. At the end I will also guide you to make a xylophone app that will play different music. In this blog, we will only be learning how to use local stored music in our local computer and include it in our project.

Objective of the Blog

- To learn to add music / audio to your flutter project

- Implement a music player into your flutter app.

- Play audio on button click

- Guide on making a xylophone app

Creating a flutter music player

To create out music player we need to follow the below steps. 

Installation

1. We will be using the Audio Players library so to include it in our project go to your command line in your code editor and enter the following code.

flutter pub add audioplayers

2. This will add the below code in your pubspecs.yaml which means that we have successfully installed the third party library to play our music.

  
dependencies:
  flutter:
    sdk: flutter
  audioplayers: ^0.19.0
  

3. Then run the below code to successfully add the package to your project.

dart pub get 
or
flutter pub get 

4. Then go to your main.dart file and add the below  code  at the top of the file to import the package.

import 'package:audioplayers/audioplayers.dart';

Importing the audio file to our project

5. The next step in making flutter music player is that you need to add the audio files which you want to play to the project. To do so create a folder in your project and name it assets then copy all the audio files to that folder.

6. After that go to your pubspecs.yaml file and write the below code. (Make sure the indentation is in the same way.)

flutter:
  uses-material-design: true
  assets:
    - assets/ 

Adding audio in Flutter App

7. Inside your stateful widget add the below code :

AudioCache audioCache = AudioCache(); 

8.  Then whereever you want your audio to play place the below code. I want it to play audio when the button is pressed so i will add a onPressed() {} function and add the code.

onPressed: () {
    audioCache.load('FILE-NAME');
    audioCache.play('FILE-NAME');
}

9. Replace the FILE-NAME with your audio file name. Finally audio you can play audio in you app.

In this way you can simply add audio player to your app. In this guide we have used audioplayers: ^0.19.1 package to play music in our app. Following these steps you can also add audio to your app. To add more features in the app you can visit Audio Players' documentation where you will get complete guide about adding more features  to your app.

Xylophone app

Now to create a flutter music player app we will be creating a Xylophone App. Here is the link to its GitHub repository where you will learn to make  a xylophone app. Team Angela have given details about how you can make a simple xylophone app using the audio player. 
Now you can also follow the above guide to make your own flutter music player app.

Get more coding guides at The Info Docs.