ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Flutter Audio Player (from URL, File, Assets)
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- Create a simple Audio Player in Flutter that plays audio from url, assets or file. This Flutter Music Player App can play audio, pause audio and stop audio and has an Audio Player progress bar and seekbar.
Click here to Subscribe to Johannes Milke: th-cam.com/users/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/audi...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
TIMELINE
0:00 Audio Player / Music Player
2:07 Load Audio From URL
2:11 Load Audio From File or Path
2:23 Load Audio From Assets
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
![CAMPปลิ้น | EP.79[1/2] แก๊งไทบ้านพาบุกเมืองบั้งไฟโก้ ยโสธรรรร!!!](http://i.ytimg.com/vi/Ldr3_fvTEXk/mqdefault.jpg)
👉Join 12 Week Flutter Training: heyflutter.com
👉Join the WhatsApp Channel to get the latest news about Flutter & HeyFlutter: whatsapp.com/channel/0029VaDNCZtC1Fu8nL2vmw3f
Source Code: github.com/JohannesMilke/audio_player
Audio Recorder Tutorial: th-cam.com/video/j4mX0jtxWpA/w-d-xo.html
Neumorphism Tutorial: th-cam.com/video/A2Bbhr3DGd0/w-d-xo.html
Nested ListViews and Columns Tutorial: th-cam.com/video/ZpHuAbYWL3w/w-d-xo.html
ChatApp UI Design Tutorial: th-cam.com/video/eGhvL082-Pc/w-d-xo.html
Flexible Widget Tutorial: th-cam.com/video/5TwBXLZdVvk/w-d-xo.html
Expanded Widget Tutorial: th-cam.com/video/N1FMX4rDn6Y/w-d-xo.html
Spacer Widget Tutorial: th-cam.com/video/n4dJVUdj4ik/w-d-xo.html
FittedBox Widget Tutorial: th-cam.com/video/WpTMNArnXdc/w-d-xo.html
Flutter Layout Basics Tutorial: th-cam.com/video/yYxueTNIDlA/w-d-xo.html
Row Layout Basics Tutorial: th-cam.com/video/lY5GtNkvyhM/w-d-xo.html
Column Layout Basics Tutorial: th-cam.com/video/nW9pAyDs-wE/w-d-xo.html
Expansion Tile Tutorial: th-cam.com/video/vRWY-IQAin0/w-d-xo.html
Expansion Panel Tutorial: th-cam.com/video/r7L146d9YA8/w-d-xo.html
Bottom Sheet Tutorial: th-cam.com/video/TXYuaiukw7E/w-d-xo.html
Popup Dialog Tutorial: th-cam.com/video/4pn-_md5Ol4/w-d-xo.html
Dropdown Menu Tutorial: th-cam.com/video/z0ihUbwlSHs/w-d-xo.html
PageView Tutorial: th-cam.com/video/sFXg-phkbQU/w-d-xo.html
Page Transition Animation Tutorial: th-cam.com/video/_R3E_aof69c/w-d-xo.html
Horizontal ListView Tutorial: th-cam.com/video/baA_J5tUtEU/w-d-xo.html
Hi.
in a ListView.builder() with many audios, when i launch one every audio read the same file. how can i solve this please
Your channel is a treasure for the flutter domain you are doing an amazing work thank you very much
Once again, thanks a lot!. Needed this for one of my projects.
Thank-you🙏🏻
This is what I was looking for 😀.
It will help me a lot in one of my project😄
thank you so much, I spent a lot of time searching for this topic
Such incredible quality! It is rare for a video to be so concise, using as little time as necessary and yet being very clear. The red outlining to show what the code represents, and you show for everything (URL, file, & assets!). The website explanations I found before only showed examples for URL
Glad you liked it, @marcodrochner7166 😀
OMG it's just what i need right now. Thanks.
Great lesson with great teacher thanks
You are a great person You always saved me thanks 😊
Wow, it's so easy! Thanks
Thank you so much Milke 👍
Thanks to your efforts as a high professional contributor.
If you try to make a video on Audio player which works in background, it would be beneficial alot.
Thanks
Doing great, thanks for this video
You saved my life! Thanks A Lot!
Glad to hear that, You are most welcome @hayahesham2980
Very awesome mr, thanks a lot
Thank you so much my brother
Thanks man !! for sharing this . Your content and explanation is really good and helpful for flutter community . Cheers !!
You are welcome, @abhisheksinghal4470 😊
Hi, Can you put a video on full audio player app with list of songs to select
Great video
awesome !!
Thank you so much sir. your channel is the best channel I have ever subscribed. you are the boss of Flutter engine.
Glad to hear that, Thank you Maliky! 😊
Yes bro You are the best
You r awesome bro❤️
Great tutorial, Great teacher, thanks, and with videos (network, file)?
Next level ...
Great tutorial Johannes, quick question - how can i continue playing the song as i navigate away to other screens in the same app?
Nice video, thanks.
Glad you liked it, @anchorrealtynm7897 😀
Awesome video.. You could add the play in background and next audio option and control from notification bar …. the way you explain no one else do it on TH-cam.. Thank you Milke ….
And also playing audio from a playlist. Thanks Mike
@@HeyFlutter Welcome Dear ..
Can you make a Background mp3 also. Great thanks
awesome work, how about going to next or back song
Thank you so much bro.Can you please teach how to rewind a audio by long pressing a button?
Thanks for the idea, Farid Ahmadov! 🙂 I have added it to my list of ideas for future videos!
Thanks for sharing ❤️💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕
You are welcome, @S-Lomar!
Great❤
Thanks, @mohammedzaheerf4126! 🙂
Next, make a video about firebase remote config. Make a video on how to save the API key in the remote config, and how to change the behavior of the app using remote config. For example how to send a pop-up message to update an app using firebase remote config 🔥
💯 Thanks you are always my life savior
You are welcome, @amrsamy9007 😊
Hi. Thnks for the great tutorial. (formatTime(position)) gives me an error. Could you tell me why is that?
formatTime is a custom method he has shown it in the upper part of the screen when he write them.
thanks for your efforts, BUT WHY do you not use the same package "flutter_sound" to play audio also, WHY you used different package to record and play, Thanks
Thank you, Botan Muhamad! 🙂. There is no specific reason for that you can use any of them.
Search data from local database in implement staggered grid view
Hey Johannes, thanks for the tutorial again.
I'm using audio player but loop does not work for iPhone when app is in background or screen is locked.
Do you know any solutions for that? Thanks
Thank your for quick response :) There is no error message, when the audio finished audioplayer.state turns to COMPLETED. It is a known issue, mentioned here github.com/bluefireteam/audioplayers/issues/1038.
you're too much. Amazing videos. It's a shame I have not been able to watch your videos lately
Thanks pro ... what if I want it to start automatically when the app start instead of using play btn ??
Thank You Tarek Refaei! Follow this link: stackoverflow.com/questions/60921992/play-audio-file-from-where-i-pause-not-from-the-beginning-in-audioplayers-flutt
I hope you will get your answer 🙂
could you please show us how to add loop function?
Thanks for the idea @MrIMacro 😀, i have added it in my list of future videos
hi, thanks for tutorial, i have a problem. the play method is not accepting a String, but a source. and i dont understand how to make it functioning.
Thank you, Sepehr Amini! 🙂. Try to paste the error message with your question whenever you face any issue or error.
Amazing content 👍🏽 Will this work for radio streaming link? Thanks
Thank You Bosun Olaniyan! Follow this link: pub.dev/packages/flutter_radio_player
I hope you will get your answer 🙂
Actually I am having a hard time playing from assets folder. The UI is staying the same. Anyone else having this problem? The setURL method for audio_players package is no longer available.
Thank You J Hancock! Follow this link: stackoverflow.com/questions/71274141/playing-audio-from-assets-flutter
I hope you will get your answer 🙂
Hello Sir,
How to set Media player with local notification? have you any code or suggestion please share me. Thank You For Giveing Me Your Important Time.
Thank You Jayswal Viraj! Follow this link: medium.com/flutter-community/local-notifications-in-flutter-746eb1d606c6
I hope you will get your answer 🙂
Thanks for video! where do i get the urls to test in my app? can you make it available?
Hey, @adrielsilva8685 🙂 there are many open source audios you can use
hello sir, how can I create a playlist and enable the next and back button for this audio player?
Thank You SHAKIR ALI! Follow this link: suragch.medium.com/managing-playlists-in-flutter-with-just-audio-c4b8f2af12eb
I hope you will get your answer 🙂
😍😍😍
hello ddear.....why audioPlayer.onAudioPositionChanged method auto starts after some seconds...and resets the position to zero...
Hey 😊, @naturalandforests8012! Check out this solution: stackoverflow.com/a/65173226 I hope this may help you
Hi, can you make a tutorial for creating an audio playlist with rootbundle assets/audio. Please
Thanks for the idea @DoremiMali 😀, i have added it in my list of future videos
this is so great...what about having a playlist?
Thanks for suggestion, @ManuMarea! 🙂
is it possible that we are able to build the flutter app for video to audio converter ???
Thank You Film in Tamil! Follow this link: stackoverflow.com/questions/73729251/to-convert-wav-audio-file-to-mp3-in-flutter
I hope you will get your answer 🙂
Hello,
when I enter a url as a String, it shows me
The argument type 'String' can't be assigned to the parameter type 'Source'.
Why does this happen?
And which URL sources can I use, youtube?
BR :)
Thank You Alex! Follow this link: stackoverflow.com/questions/55995791/how-can-i-resolve-the-argument-type-string-cant-be-assigned-to-the-parameter
I hope you will get your answer 🙂
How can i fast-foward and rewind-back the audio? I'm unable to do so usibg the audioPlayer package
Thanks for the idea Hira Sharif 😀, i have added it in my list of future videos
Excuse me I want to play audio come from APIs and I created class model and use dio for making http request every time I request it gives me timeout exception and future not completed and cookies null how I can solve this problem
Thank You @salmakhaled8024! Follow this link: stackoverflow.com/questions/64214710/how-to-fetch-audio-from-my-api-with-protected-urls-using-just-audio-flutter
I hope you will get your answer 🙂
Wonderful tutorial thanks a lot Sir, just a quick question, when I click on play button am able to play my audio from url and if I go over and click on the other file it also start playing. but I want a situation where if there is already one playing and I click on the other file to play, I want the one which was playing to automatically stop and play the current selected.
How can I achieve that?
Thanks,
Thank You Hit-Boyy! Follow this link: stackoverflow.com/questions/70606438/flutter-how-to-play-and-stop-audio-at-specific-time
I hope you will get your answer 🙂
@@HeyFlutter thanks 🙏
Hello, how can I prevent audio from overlapping when multiple audios are played? Like pause the audio which was playing and play the audio which was recently clicked...
Hey, Mohit Marfatia 🙂 This has to be handled by the platform itself
@@HeyFlutter Thank you for the reply. By platform, do you mean the audioplayers package?
How to make custom check box in list view and selection of check box
Thank You Sunil Gohel! Follow this link: stackoverflow.com/questions/63788530/how-to-add-checkbox-in-listview-in-flutter
I hope you will get your answer 🙂
Using Assets getting Exoplayer error
It is working fine for Android but for iOS when i Play song list through url application is crashed after first song. Giving ' nil value fetal error'
No Worries vikas kumar Gupta, make sure to follow the tutorial step by step 🙂
When I upload my application to Galaxy Store they reject the application because of a message "Blocked by Play Protect" knowing that I built the application in your way, Is the reason that the application is not on Google Play?
Thank You Abdullah Khaled! Follow this link: stackoverflow.com/questions/51080755/installation-app-blocked-by-play-protect
I hope you will get your answer 🙂
How can you play a youtube audio just the audio because this did not work for me
Hey, @fresshsh8197 🙂 TH-cam urls are encoded so cannot be directly accessed. Please try this solution: th-cam.com/video/GQyWIur03aw/w-d-xo.html
Hi! How to make it work in FlutterFlow and in the background?
Thank You Manuel Salero! Follow this link: docs.flutterflow.io/widgets-and-components/widgets-ui-elements/base-elements/audioplayer
I hope you will get your answer 🙂
hey through your prev video i build a voice recorder , and i tried to play that audio file from url , no error and slider also not moving
when i press the play button this exception occur
Exception has occurred.
PlatformException (PlatformException(Unexpected error!, uriString, java.lang.NullPointerException: uriString
at android.net.Uri$StringUri.(Uri.java:490)
at android.net.Uri$StringUri.(Uri.java:480)
at android.net.Uri.parse(Uri.java:452)
at android.media.MediaPlayer.setDataSource(MediaPlayer.java:1170)
at android.media.MediaPlayer.setDataSource(MediaPlayer.java:1164)
at android.media.MediaPlayer.setDataSource(MediaPlayer.java:1131)
at xyz.luan.audioplayers.WrappedMediaPlayer.actuallyPlay(WrappedMediaPlayer.kt:219)
at xyz.luan.audioplayers.WrappedMediaPlayer.play(WrappedMediaPlayer.kt:205)
at xyz.luan.audioplayers.AudioplayersPlugin.handleMethodCall(AudioplayersPlugin.kt:79)
at xyz.luan.audioplayers.AudioplayersPlugin.onMethodCall(AudioplayersPlugin.kt:33)
at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:262)
at io.flutter.embedding.engine.dart.DartMessenger.invokeHandler(DartMessenger.java:296)
at io.flutter.embedding.engine.dart.DartMessenger.lambda$dispatchMessageToQueue$0$DartMessenger(DartMessenger.java:320)
at io.flutter.embedding.engine.dart.-$$Lambda$DartMessenger$TsixYUB5E6FpKhMtCSQVHKE89gQ.run(Unknown Source:12)
at android.os.Handler.handleCallback(Handler.java:873)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:6669)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
, null))
@@HeyFlutter thanks for your beloved time, i got it right, it was due to setAudio() function, i placed those code to stop() function where recorder stops.
am using getx, so i think onInit calls only once right, is becasue of this the slider is not moving? please reply
Hey nice video, I am facing an issue 0:48 where you create the URL , the error is showing that The argument type 'String' can't be assigned to the parameter type 'Source'. Please help
Wrap your url with UrlSource widget
Thank You Priyanshu Dutta! Follow this link: www.kindacode.com/snippet/flutter-error-the-argument-type-string-cant-be-assigned-to-the-parameter-type-uri/
I hope you will get your answer 🙂
thank you
i have error after i add audioplayers: ^0.20.1
Because toku depends on audioplayers >=0.13.7 which requires Flutter SDK version >=1.10.0, version solving failed.
pub get failed (1; Because toku depends on audioplayers >=0.13.7 which requires Flutter SDK version >=1.10.0, version solving failed.)
and im searching alot to solve this error ,but i cant
Hello, heyam awad! Follow this link: stackoverflow.com/questions/51474647/flutter-packages-get-failed-depends-on-flutter-test-any-from-sdk-which-requires,
I hope it will solve your problem. Thank You 🙂
I don't know when i pick the file but it can't use in setUrl and there is no and attribute in setUrl even setUrl is not working nowday
Thank You @user-tr9yb2cl4j! Follow this link: stackoverflow.com/questions/62872496/no-audio-sound-after-importing-audioplayers-package-in-flutter
I hope you will get your answer 🙂
how to play with background service ? can u explain with video ?
@@HeyFlutter ok, nice
i will waiting , thanks
Hey Johannes i wanna ask about
formatTime
when i use
final formatTime = new DateFormat(' hh:mm');
with init the code error in anthor thing like
Directionality(
textDirection: TextDirection.ltr,)
any help to do formatTime without any problems
Thank You Aly Bauomy! Follow this link: stackoverflow.com/questions/50758072/date-time-format-in-flutter-dd-mm-yyyy-hhmm
I hope you will get your answer 🙂
@@HeyFlutter i already use all code datatime in this wep
i just want your small datatime method that you use in this vedio
can you tell me, how i will get audio duration.. i already try your way but not working
Thank You harsh gupta! Follow this link: stackoverflow.com/questions/58999064/how-to-get-length-of-audio-file-without-playing-it-in-flutter-dart
I hope you will get your answer 🙂
thanks for the exerted effort , I face an issue children: [
Text(formatTime(position)),
Text(formaTime(duration)),
]
it doesn't recognize formatTime
Hey, @yousefabdelnaby3555 🙂 please make sure to check:
1. formatTime() is defined with in scope (i.e., in same class on global level)
2. formatTime() is returning a string value
How to play the audio when the app is in background?
Thank You @amandwivedi7413! Follow this link: stackoverflow.com/questions/61688915/playing-audio-in-the-background-using-flutter
I hope you will get your answer 🙂
Sir What if the audios are stored in firebase and the link is there but in last there is no .wav how to play that URL from firebase?
Hey, @amandwivedi7413 🙂 If your URL does not end with a typical audio format extension like .wav or .mp3, the package might still be able to play the audio if it supports the format that the URL is pointing to.
@@HeyFlutter Thank you so much
hello @Johannes milke
I am not able to pass String parameter inside play method.
The argument type 'String' can't be assigned to the parameter type 'Source
Please help me
Thank You Surendra Vishwakarma! Follow this link: stackoverflow.com/questions/55995791/how-can-i-resolve-the-argument-type-string-cant-be-assigned-to-the-parameter
I hope you will get your answer 🙂
@@HeyFlutter thanks for response my question.i resolved this issue just change version of the audioplayers
the formatTime(position) is throwing red line. who knows why please?
Thank you, abel ayinde! 🙂. Try to paste the error message with your question whenever you face any issue or error.
Hey NEED LIST BUILDER WITH LIST BUILDING ITEMS AND CLCIK OF LIST ITEMS SHOWS DATA IN DIFFERENT SCREEN......ALL DATA WILL BE FETCH FROM FIRESTORE 🥰🌹👍😇
NotSupportedError: The element has no supported sources. getting this error when trying to play audio from assets
Hello, CombatCraz! Follow this link: stackoverflow.com/questions/37674223/domexception-failed-to-load-because-no-supported-source-was-found, I hope it will solve your problem. Thank You 🙂
❤️
How to play audio saved in cache memory?
Hey, Prasad Dhend! 🙂 check out this package : pub.dev/packages/just_audio_cache
Hi I had a question as always great tutorial how would we make this work with multiple audio files if you can make a tutorial on that
Thank you
Thanks for the idea, Kirubel Berhanu! 🙂 I have added it to my list of ideas for future videos!
@@HeyFlutter Thanks 😁
The method ‘setUrl’ isn’t defined for the type ‘AudioPlayer’. Try correcting the name of an existing method, or defining a method named ‘setUrl’
Thank You Almighty KODaDon! Follow this link: stackoverflow.com/questions/72654603/the-method-play-isnt-defined-for-the-type-audiocache
I hope you will get your answer 🙂
@@HeyFlutter I will check this out
Hi. the package is not working on iOS 16. Do you have any update?
Thanks for updating, 투자해서 행복해요! 🙂 will try to bring updated tutorial
@@HeyFlutter hi. It was a bug in the simulator of VSCODE. Thank you for your attention.
Can't find this package
Thank You Code Pie! Follow this link: pub.dev/packages/audioplayers
I hope you will get your answer 🙂
Can you send link in github to this mobile app? I want to see code
Thank You Елназ Алмасулы!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
I cannot get the confirmation email for access
Thanks, Prasanna Khebade! 🙂 Learn more about it here: github.com/JohannesMilke/sponsorware#2-why-didnt-i-get-an-email-even-if-i-have-sent-already-a-request-on-your-website
How to play the audio from the asset
@@HeyFlutter thank you very much 🤗
Salam dari Indonesia sobat
@@HeyFlutter siap pak bos
does the url work with youtube link ?
No
i can listen to music but seeker is not working, i used same package version as your and its working in IOS simulator but not in android phones.
Thank you, akhil Anand! 🙂. Kindly update to the latest version and see if it works or not.
@@HeyFlutter i updated to newer version,problem still exit. its working on IOS simulator but not in android device
@@HeyFlutter is there any additional setting we need to do in android
i cant access to your git hub code
Thank You DANISH ALI!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
How to fetch metadata from the url stream? Like Now playing: artist Name song Title
Thank You @alek4001! Follow this link: stackoverflow.com/questions/64100094/how-can-i-fetch-the-metadata-of-audio-files-in-flutter
I hope you will get your answer 🙂
@@HeyFlutter Thank you very much. I havr already solved this problem using just audio package. It can retrieve Icymetadata
Can I make this plugin from scratch tutorial?
What is format time ?
Thank You Thanveer Pm! Follow this link: stackoverflow.com/questions/50758072/date-time-format-in-flutter-dd-mm-yyyy-hhmm
I hope you will get your answer 🙂
Source code not available on github
Thank You Santosh kumar!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
can i use html.File?
what i meant is, i need to play audio using base64 supplied from the backend, from the tutorial i see that we can play audio using File (from dart.io), what i ask, can i play the audio using File(from dart.html) since im currently on Web
my duration variable is 0 when i playing audio local path
Thank You @truonguc886! Follow this link: stackoverflow.com/questions/58999064/how-to-get-length-of-audio-file-without-playing-it-in-flutter-dart
I hope you will get your answer 🙂
How to recover audio files automatically without using FilePicker?
@@HeyFlutter I want to create a local music player and I don't know how to get all the audio files from the device's storage automatically
Doesn't work on audioplayers 3.0.1. Half of the methods are gone.
Thank you, D GK! 🙂. Try to provide enough details with yours question whenever you face any issue.
can you send me the code, please?
Hey, Osama 🥀 Omran 🙂 you can access it by subscribing on github