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
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.
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"
}
]2025-05-04 07:37:46
The tutorial is very good and excellent, but you could not show the file structure of the project for as to the directories and the files you created.
starter file get the apk
