Nowadays many apps have audio files inside to listen to, whether they are fitness, music or mental health apps. Let’s see a basic approach to build an app with an audio player.
In this article we will focus on the audioplayers plugin but there are many other plugins to handle audios like audio_service.
So without further ado let’s dive into coding! The first thing to do is to add the following packages to your
pubspec.yaml and then run
flutter pub get.
Notice that http and path_provider are required only if you need to download your audio files.
Platform Specific Setup
To allow HTTP connections to any site you will need few lines of code:
Edit the Info.plist file with:
Edit AndroidManifest.xml file located in
Creating the widget
Now, let’s start to create our Widget that will handle the audio; First of all, let’s import the package in our widget:
then create a Stateful Widget that will accept a url as parameter and an
isAsset that will be true only if the audio to be played will be inside assets:
_AudioPlayerWidgetState let’s setup some properties:
- the AudioPlayer itself
- the AudioCache, mandatory if you need to reproduce an asset audio
- our PlayerState that will store the current state of the AudioPlayer
- a commodity computed variable
isPlayingthat we’ll use to see wether the player is playing or not
- another computed variable
_isLocalthat we’ll use to see whether the url to play is local or not
Since we’ve declared the
_audioCache as late variables we are going to init them inside the
Again, this is a starter guide so I won’t handle here duration, seek or background; just remember that if you are going to choose the
PlayerMode.LOW_LATENCYyou won’t be able to handle seek or duration updates since this mode is crafted for very short audio files.
The only stream that we’re going to listen to will be
onPlayerError, so, if an error is thrown for any reason, we will stop immediately the audio.
Please note: always remember to invoke the
dispose() method to close all the streams!!
Play / Pause / Stop
Play/pause actions are managed by the
_playPause() method which checks the player’s status and invokes an action accordingly. We won’t show the Stop method for the sake of brevity but the logic is exactly the same as for the method below.
The usage is pretty straightforward, just implement the
AudioPlayerWidget inside you widget specifying for:
- specify the filename + extension (e.g. my_audio.mp3) of the asset to reproduce
isAssetvariable to true
Set the audio widget’s url property with the url of the audio.
Download the audio from the url, save it and set the file path as the audio widget’s url property.
You don’t how how to fetch and save an audio from a provided url? don’t worry we are here for this Just set
_loadFilePath() as the future of a
As you may have noticed a simple implementation of an Audio Player is pretty straightforward and you won’t have any problem to implement it in you app.
You can find the whole code inside this GitHub repo!
Where to go now?
You can dig deeper inside audioplayers plugin and do some experiments with seek and background handling or… just wait my next chapter of this Audio Player series see you soon!
Article written by the majestic Alessandro Viviani.