online software programming courses

Flutter Audio Player

You will learn how to build an audio player in flutter step by step. After searching a lot on Google and other search english, I could not find a good flutter audio player tutorial or a complete guide. So after doing a lot of research I decided build a complete flutter audio app tutorial fo beginners step by step. 

Check out the youtube tutorial video for this

In this tutorial, we will be using a plugin

They have their documentation for different functions for the audio players in the link

But they are all scattered. Putting them together for newbie's a is a giant task. So I decided to create an article where we will put all the functions together.

The functions we will cover are listed below

1. Play and  pause the audio 

2. Change the icon as we play and pause

3. Fast forward and slow forward

4. Play the audio in a loop or repeat

5. Change the icon as you repeat and release

6. Stop the audio when you go to a new page

To create an audio player based on AudioPlayers plugin you need to install the plugin in first. Type in the below command in your flutter terminal.

flutter pub add audioplayers

This will add flutter audio player plugin your flutter project. 

Then you can create a dart file and import the plugin file with the below line

import 'package:audioplayers/audioplayers.dart';

With the above line imported we can create audio player instance.

Use the below line to. declare an audio player instance.

AudioPlayer advancedPlayer;

and then in your initState() method initialize like

@override
void initState(){
 super.initState();
 advancedPlayer = AudioPlayer();
}

Later on your can access the different audio player's api using the variable advancedPlayer.

Next, let's load an audio asset. We will load audio asset remotely from a server. So we will load the asset from a url. 

To add the url we can simple add a new line in the initState() method.

final string audioPath;

@override
void initState(){
 super.initState();
 advancedPlayer = AudioPlayer();
 audioPath="https://www.xyz.com/you.mp3";
 advancedPlayer.setUrl(audioPath);
}

That's how you add a url to audio player's. We declared a variable to save the path of the url so that, we can use it later. Next We will see how to play this audio.

To play an audio just simply create a function or a new widget function. The idea is same. Whatever you create we will call the play() with the given url. 

We created a widget function called btnStart(). It returns a widget. 

bool isPlaying=false;  

Widget btnStart() {
    return IconButton(
        onPressed: (){
          if(isPlaying==false) {
            advancedPlayer.play(audioPath);
            setState(() {
              isPlaying = true;
            });
          }else if(isPlaying==true){
            advancedPlayer.pause();
            setState(() {
              isPlaying=false;
            });
          }
        },
    );
  }

In the above code, we delcared a variable isPlaying to control the audio play button. Because the same button works as play and pause button. Only when the state changes through setState() function, then we set the variable to true or false. When the state is false, it means we can play the audio and when the state is false, it means we can pause the audio.

So based on isPlaying true or false, we call pause or play the audio.

Next we will see how to fast forward or slow forward the audio track. To do that, first we will delcare a widget function. We will call it btnFast().

  Widget btnFast() {
    return
      IconButton(
        icon:   ImageIcon(
          AssetImage('img/forward.png'),
          size: 15,
          color: Colors.black,
        ),
        onPressed: () {
          advancedPlayer.setPlaybackRate(playbackRate: 1.5);
        },
      );
  }

In the above function we set setPlaybackRate to 1.5, I think the default is 1.0, which is the normal speed. This is done in onPressed() function. 

Also notice that, for this button I have used an IconImage. If you don't have the image, you just simple use Icon of flutter.

Next we will build slow forward widget button. We will call it btnSlow(). Let's the see the function below

  Widget btnSlow() {
    return IconButton(
      icon:   ImageIcon(
        AssetImage('img/backword.png'),
        size: 15,
        color: Colors.black,
      ),
      onPressed: () {
    advancedPlayer.setPlaybackRate(playbackRate: 0.5);

      },
    );
  }

As you can see that, it's same as btnFast(). Just the playbackRate is different. It's less than 1.0, which means it will slow it down.