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
flutter upgrade
in the terminal to upgrade Flutterdart migrate
to run the dart migration tool.dart migrate
again and it should now be successful. Follow the link to checkout the proposed changes.
Errors and warnings fix
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.
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