Enhance Your Flutter App with Assets Audio Player: Implementing Play and Pause Functionality

Introduction:

Adding audio playback functionality to your Flutter app can create an immersive user experience. In this blog post, we will explore how to utilize the Assets Audio Player library to implement play and pause functionality for audio files.

By following the steps outlined below, you’ll be able to enhance your Flutter app with interactive audio controls.

Prerequisites:

Before we begin, ensure that you have a basic understanding of Flutter development and have integrated the Assets Audio Player library into your project. If you haven’t done so, refer to the previous blog post (link given below) on how to add the library and set up audio playback.

Assets Audio Player | Flutter

Implementing Play and Pause Functionality: To implement play and pause functionality, we will utilize the Assets Audio Player library and Flutter’s user interface widgets.

1.System Check Class:

Create a class named “SystemCheck”

class SystemCheck {

  static bool musiccheck = true;

  static void setmusic (bool val)
  {
    musiccheck=val;
  }
  static bool getmusic ()
  {
    return musiccheck;
  }
  
}

2. Initializing AudioPlayer:

Check the previous blog (link given above) to see the code for Audio Player Service class.
In your main class (the class at which the button for play/pause is present), add a bool names ‘isplaying’ to check if the audio is playing or not.

bool isplaying = true;

Add the following code snippet in the initial state of your main page ‘s class. This code plays the audio and also initializes the bool “isplaying” with true or false value considering if the audio is playing or not. Also refer to the previous blog post (link given above) for SystemCheck class, that returns true or false for the state of audio.

void initState() {
    // TODO: implement initState
    if (SystemCheck.musiccheck) {
      AudioPlayerService.audioPlayer.open(Playlist(audios: [
        Audio("assets/audio/bgmusic.mp3")
      ]),
          loopMode: LoopMode.playlist);
    }

    AudioPlayerService.audioPlayer.isPlaying.listen((bool playing) {
      setState(() {
        isplaying = playing;
      });
    });
    super.initState();
  }

3. Play/Pause Code
The follwoing code snippet is to define a button by the click of which the audio starts or stops playing. In the code given below, the button is represented by the music icon.

 IconButton(icon: Icon(
                    isplaying ? Icons.music_note : Icons.music_off,
                    color: Colors.black,
                    size: 45,
                  ),
                  onPressed: () {
                    if (isplaying) {
                      AudioPlayerService.pause();
                      SystemCheck.setmusic(false);
                    } else {
                      AudioPlayerService.play();
                      SystemCheck.setmusic(true);
                    }
                    setState(() {
                      isplaying = !isplaying;
                    });
                  },
                ),

Note that since SystemCheck class is created to check the state of the audio, It is necessary to update it everytime the button/icon is clicked.

Conclusion:

In this blog post, we explored how to implement play and pause functionality using the Assets Audio Player library in Flutter.

Remember to leverage the Assets Audio Player library’s additional features, such as volume control and audio seeking, to further enhance your audio playback experience.

I hope this tutorial helps you create interactive and engaging audio features in your Flutter app. Feel free to experiment and customize the UI and functionality to suit your specific requirements.

The complete code can be seen on the github link below,

GitHub - Hadia-i190404/Flutter_Audio_PlayPause

#FlutterDevelopment #AudioPlayback #AssetsAudioPlayer #InteractiveUI