Flutter Audio Players and Background Audio (Assets, URLs, & Playlist) | Learn Flutter Fast

today we're going to build an app that plays a playlist of audio files from our local assets and specified URLs we'll also integrate background audio so audio continues playing even when users lock their device they can control the audio player from the lock screen let's get into it in our pubspec.yaml the first package we're going to add is a cache Network image package we're displaying and caching the podcast image the second is audio video progress Bar for a clean progress bar UI that allows us to seek to different times in the audio while also showing us the amount of audio that is buffered then we have just audio and just audio background so we can actually play audio files and keep them playing when backgrounded and finally we need rxdart to combine a few streams of data in order to properly show our video progress bar just audio requires a little bit of setup on IOS and Android for iOS if we want to load audio files from non-https URLs or use other features like caching and streaming we have to add the NS app transport security key and allow arbitrary loads since AV Audio sessions API includes the microphone API the App Store might detect that our app uses the microphone so we need to add the NS microphone usage description key and usage description to our info plist however since our app doesn't use the microphone at all we don't need to include this line instead we have to go to our pod file and add this build configuration to compile out any microphone code for Android add Internet permission and use Clear text traffic for loading files from urls I added a short MP3 file called nature.mp3 that lives in my assets audio directory so I'll add this directory to my Pub spec to load the file audio player screen has a transparent app bar and a gradient background to play our local audio file we need to add an audio player to our stateful widget and initialize it in a net State here we set the asset audio with set asset and provide the path we dispose of our audio player in our dispose method let's make a button that plays or pauses the audio player in a new stainless widget called controls take in an audio player parameter and create a stream Builder that listens to updates from the player if the audio player is not playing then we show a play button that calls audio player.play and if it is playing we pause the audio player if neither condition is met we just display a play Arrow icon we can now play and pause our audio file our audio progress bar needs to rebuild whenever our audio file's current position duration buffer duration or total duration changes the audio player has a separate stream for each of these values we want to combine these three streams into one stream and output a custom class called position data position data has three variables position buffer position and duration above init State let's use rxdart to combine the three streams position data stream is a getter that returns a stream of position data using RX dot combine latest 3 we pass in each stream and return the position data we use a stream Builder to build our UI from this stream snapshot and render a progress bar with progress buffered and total arguments and of course we need to add the seek method to allow users to slide the progress bar to their desired timestamp add some styling to spice up the progress bar and it works playing audio from a network can be done with set URL instead of set asset pass in a valid URL and hot restart the app just a very quick thing before we get started if you have not yet subscribed to the podcast like a blue iMac that says a on it and there's like a little leak all the data was properly updated now we're ready to move on to creating a playlist our playlist will have a mix of files from our local assets and network let's create the private variable playlist with a concatenating audio source here we specify each audio source to include metadata about each audio source include a media item defining an ID title artist and art URI we'll display this data in our UI soon in a knit State we first initialize the audio player and then call a new asynchronous method called init set the audio player's Loop mode to all to wrap the playlist when going to the previous or next track and set the audio source to a playlist to display the artwork title and artist make a new widget called media metadata that takes these parameters and shows the cache Network image in a decorated box with box Shadow and Border radius title and artists are text widgets with some light styling below this we get the current metadata media item by using a stream Builder that streams back the current source of the audio our controls need to have two more buttons to go to the previous and next track wrap the play pause button in a row widget and add an icon button that seeks to the previous and another one that seeks to the next and just like that our playlist is functioning perfectly favorite podcast app of choice then please do it really helps us out a lot or accomplish with this video instead of just the youngest part or I think it's like self-perpetuating just a very quick the last thing we're going to do is add background audio support to our app so we can listen to audio when our app is backgrounded or devices locked in our Pub spec we already added the just audio background package iOS requires us to add UI background modes with audio in our info plist in the main Android manifest add wake lock and foreground service permissions set the activities Android name to the string and then add the service and receiver element if you get any errors about multi-decks when running the Android app you may have to change your app build.gradles Min SDK version to 21. back in main.dart our main function needs to be asynchronous and initialize just background audio to control the background audio when our app is not in the foreground because we defined media item as tags we're able to see all this data in the lock screen and it's working great video and assigning things and make sure everyone's doing smaller Crest on the top which thing happened the core of our business right now uh and taking what's going on everybody I'm bringing some more books to consolidate once I find something to reward that behavior and I'm going to wrap this video up here if you liked it don't forget to leave a like And subscribe be sure to check out all the links in the description below thanks for watching and I'll see you in the next one

Channel: Marcus Ng

Views: 49,341

Keywords: flutter audio player, flutter music app, flutter audio player background, flutter audio player example, flutter audio player tutorial, flutter audio player from url, flutter audioplayer, flutter music player, flutter audio, flutter play audio, flutter audio player package, flutter audio player from assets, flutter audio player ui, flutter audio streaming app, flutter music player app tutorial, flutter music player package, flutter background audio, flutter lockscreen audio

Id: DIqB8qEZW1U

Length: 6min 25sec (385 seconds)

Published: Fri Nov 25 2022