Flutter Audio Player

Here you will learn how to step by step build an audio player using flutter. We will build a complete ui for the audio player and will have the below functions for the app.

1. load audio from the internet

2. play audio

3. play audio fast (fast forward and backward)

4. play audio slow

5. pause the audio

6. resume the audio

7. show the time on the slider

Download the resources for the audio player

https://www.dbestech.com/audio_img.zip

Watch Youtube Video here

Upgrade

Run the below commands to upgrade

1. Run flutter upgrade in the terminal to upgrade Flutter
2. Run dart migrate to run the dart migration tool.
3. flutter pub upgrade --null-safety
4. Check the code for errors and solve them (Very important).
5. Run dart migrate again and it should now be successful. Follow the link to checkout the proposed changes.
6. Press the "Apply Migration" button.
7. Check the code for errors again and fix them.

Errors and warnings fix

Lot of the errors happens if you upgrade to flutter 3.0

1. There could be errors about the IconButton

  Widget btnLoop() {
    return IconButton(
        icon:   ImageIcon(
          AssetImage('img/loop.png'),
          size: 15,
          color: Colors.black,
        ), onPressed: () {  },
    );
  }

In the above code we added the onPressed event.

2. Make the following change from

this.widget.advancedPlayer!.setPlaybackRate(playbackRate: 0.5);

to

this.widget.advancedPlayer!.setPlaybackRate(0.5);

playbackRate is not defined in setPlaybackRate() new version of the plugin and flutter upgrade. So we need to remove it.

3.  Change setUrl() to the below code

    /*
    change setUrl to setSourceUrl
     */
    this.widget.advancedPlayer!.setSourceUrl(this.widget.audioPath!);
    

4. Change onPlayerCompletion to onPlayerComplete

 this.widget.advancedPlayer!.onPlayerComplete.listen((event) {
.......................................................................................................

Find me on twitter @dbestech

Show time on Slider

If you get error during the slider part, make sure your code is like below

  Widget slider() {
    return Slider(
        activeColor: Colors.red,
        inactiveColor: Colors.grey,
        value: _position.inSeconds.toDouble(),
        min: 0.0,
        max: _duration.inSeconds.toDouble(),
        onChanged: (double value) {
          setState(() {
            changeToSecond(value.toInt());
            value = value;
          });});
  }

  void changeToSecond(int second){
    Duration newDuration = Duration(seconds: second);
    this.widget.advancedPlayer.seek(newDuration);
  }

Make sure that, you are calling the slider() method inside build method().

  @override
  Widget build(BuildContext context) {
    return
      Container(child:
      Column(
      children: [
      ............................

        slider(),
        loadAsset(),
      ],
    )

    );
  }

Code for app_colors.dart

import 'dart:ui';

final Color background = Color(0xFFfafafc);
final Color sliverBackground = Color(0xFFfafafc);
final Color menu1Color=Color(0xFFf9d263);
final Color menu2Color= Color(0xFFf2603d);
final Color menu3Color= Color(0xFF04abe6);
final Color tabVarViewColor=Color(0xFFfdfdfd);
final Color starColor=Color(0xFFfdc746);
final Color subTitleText=Color(0xFFc5c4ca);
final Color loveColor=Color(0xFF00ace6);
final Color audioBluishBackground=Color(0xFfdee7fa);
final Color audioBlueBackground= Color(0xFF04abe7);
final Color audioGreyBackground=Color(0xFFf2f2f2);

Keep playing the music player

 onPressed: (){
                        Navigator.of(context).pop();
                        advancedPlayer.stop();
                        },

remove the stop() method if you want to