Dbestech

Flutter Audio Player

Created At: 2021-07-20 00:43:01 Updated At: 2024-06-26 11:16:07

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.

Below is the latest of the audio player

App Features

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

8. skiping time and fast forward

9. going back time

10. audio wave

11. local storage audio list (playing history)

12. delete from audio list

13. replay audio

14. beautiful audio loading icons

You may buy the complete source code here

State management

Here we have used BLoC for state management and Cubit (hydrated cubit) for local storage.

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.

JSON Files

Let's see our two json files. You need to copy and paste them as necessary.

books.json

[
  {
    "rating": "4.5",
    "title":"THE WATER CURE",
    "text":"Martin Hyatt",
    "img": "img/pic-1.png",
    "audio": "https://st.bslmeiyu.com/uploads/%e6%9c%97%e6%96%87%e5%9b%bd%e9%99%85SBS%e7%b3%bb%e5%88%97/%e6%9c%97%e6%96%87%e5%9b%bd%e9%99%85%e8%8b%b1%e8%af%ad%e6%95%99%e7%a8%8b%e7%ac%ac1%e5%86%8c_V2/%e5%ad%a6%e7%94%9f%e7%94%a8%e4%b9%a6/P149_Chapter%2016_Vocabulary%20Preview.mp3"
  },
  {
    "rating": "4.5",
    "title":"PEACE LIFE",
    "text":"Hazard Bin",
    "img": "img/pic-2.png",
    "audio": "https://st.bslmeiyu.com/uploads/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85SBS%E7%B3%BB%E5%88%97/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85%E8%8B%B1%E8%AF%AD%E6%95%99%E7%A8%8B%E7%AC%AC2%E5%86%8C_V2/%E5%AD%A6%E7%94%9F%E7%94%A8%E4%B9%A6/P027_Side%20by%20Side%20Gazette%2001_2Build%20Your%20Vocabulary!.mp3"
  },
  {
    "rating": "4.5",
    "title":"Day Remember",
    "text":"Nicholos",
    "img": "img/pic-3.png",
    "audio": "https://st.bslmeiyu.com/uploads/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85SBS%E7%B3%BB%E5%88%97/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85%E8%8B%B1%E8%AF%AD%E6%95%99%E7%A8%8B%E7%AC%AC2%E5%86%8C_V2/%E5%AD%A6%E7%94%9F%E7%94%A8%E4%B9%A6/P027_Side%20by%20Side%20Gazette%2001_2Build%20Your%20Vocabulary!.mp3"
  },
  {
    "rating": "4.5",
    "title":"France",
    "text":"Paris",
    "img": "img/pic-4.png",
    "audio": "https://st.bslmeiyu.com/uploads/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85SBS%E7%B3%BB%E5%88%97/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85%E8%8B%B1%E8%AF%AD%E6%95%99%E7%A8%8B%E7%AC%AC1%E5%86%8C_V2/%E5%AD%A6%E7%94%9F%E7%94%A8%E4%B9%A6/P150_Chapter%2016_1Model%20Conversation.mp3"
  },
  {
    "rating": "4.5",
    "title":"Germany",
    "text":"Berlin",
    "img": "img/pic-5.png",
    "audio": "https://st.bslmeiyu.com/uploads/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85SBS%E7%B3%BB%E5%88%97/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85%E8%8B%B1%E8%AF%AD%E6%95%99%E7%A8%8B%E7%AC%AC1%E5%86%8C_V2/%E5%AD%A6%E7%94%9F%E7%94%A8%E4%B9%A6/P150_Chapter%2016_1Model%20Conversation.mp3"
  },
  {
    "rating": "4.5",
    "title":"Italy",
    "text":"Rome",
    "img": "img/pic-1.png",
    "audio": "https://st.bslmeiyu.com/uploads/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85SBS%E7%B3%BB%E5%88%97/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85%E8%8B%B1%E8%AF%AD%E6%95%99%E7%A8%8B%E7%AC%AC1%E5%86%8C_V2/%E5%AD%A6%E7%94%9F%E7%94%A8%E4%B9%A6/P150_Chapter%2016_1Model%20Conversation.mp3"
  },
  {
    "rating": "4.5",
    "title":"Switzerland",
    "text":"Bern",
    "img": "img/pic-1.png",
    "audio": "https://st.bslmeiyu.com/uploads/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85SBS%E7%B3%BB%E5%88%97/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85%E8%8B%B1%E8%AF%AD%E6%95%99%E7%A8%8B%E7%AC%AC1%E5%86%8C_V2/%E5%AD%A6%E7%94%9F%E7%94%A8%E4%B9%A6/P150_Chapter%2016_1Model%20Conversation.mp3"
  },
  {
    "rating": "4.5",
    "title":"Singapore",
    "text":"Singapore",
    "img": "img/pic-1.png",
    "audio": "https://st.bslmeiyu.com/uploads/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85SBS%E7%B3%BB%E5%88%97/%E6%9C%97%E6%96%87%E5%9B%BD%E9%99%85%E8%8B%B1%E8%AF%AD%E6%95%99%E7%A8%8B%E7%AC%AC1%E5%86%8C_V2/%E5%AD%A6%E7%94%9F%E7%94%A8%E4%B9%A6/P150_Chapter%2016_1Model%20Conversation.mp3"
  }
]

popularBooks.json

[
  {
    "rating": "4.5",
    "title":"THE WATER CURE",
    "text":"Martin Hyatt",
    "img": "img/pic-8.png",
    "audio": "Voices.mp3"
  },
  {
    "rating": "4.6",
    "title":"PEACE LIFE",
    "text":"Hazard Bin",
    "img": "img/pic-7.png",
    "audio": "June - Bobby Richards.mp3"
  },
  {
    "rating": "4.5",
    "title":"Day Remember",
    "text":"Nicholos",
    "img": "img/pic-6.png",
    "audio": "Muriel - Bobby Richards.mp3"
  },
  {
    "rating": "4.5",
    "title":"France",
    "text":"Paris",
    "img": "img/pic-9.png",
    "audio": "Piano Trap.mp3"
  },
  {
    "rating": "4.5",
    "title":"Germany",
    "text":"Berlin",
    "img": "img/pic-10.png",
    "audio": "Voices.mp3"
  }


]

Comment

Add Reviews

Article resources

  • starter file
  • get the apk

Recommended Posts

Latest Posts

Subscribe our newsletter