Complete BLoC with Clean Architecture (group chat) Discount !! E-commerce App With Backend Source Code Video and Voice Chatting App Firebase Chatting App Source Code Complete Gym App BLoC State Management Source Code Complete Study App Buy Ticket Booking App Source Code Buy Travel App With Backend Source Code Complete Chat App Udemy Course Special Offer Discount !! Online Learning Course App (BLoC) Online Learning Course App (Riverpod) Online Learning Course App (Getx) Discount !! Shopping App (Provider) Cool Flutter Game Nodejs Flutter Complete App
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
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
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