#Google's FlutterTutorial - Background Running Music Player like Amazon Music in Flutter

hello and welcome back to another flutter tutorial in this video we will see how to make a music player just like an zone music or the iTunes music which will run in the background and also in the lock screen with basic controls showing up in the lock screen to control the music right so this is the basic UI of the app that we are going to build with the control showing up in the lock screen and also you will have the basic controls to pause the music or fast-forward or rewind control the volume and skip to next item or the previous item okay so this will go this will go away only when you kill the app right so this is going to stay just like other the like we mentioned the Amazon music or other music players that you are using so it's going to stay in the lock screen until you kill there okay so let's see how we can do it I'll be providing the link to the plugins that I am using and also the source code for this demo in the description below this video so what's till the end and if you find the video useful please support by subscribing to this channel and also please like and share the video so let's not waste the time and jump into the code okay so I have a basic clutter project ready and this is my pups pictorial pile where we add the plugins we have the HTTP package the audio service package and it's just about your package so let me explain what Israel - the HTTP package will fetch the audio from the internet the audio service package will help us to play the audio in the background and it just audio is the audio player that we are using to play the audio okay so unless you add how are these plugins make sure to call flutter packages get or if you are using the BS code it should automatically call so if not please call the flutter packages kit and install the packages okay so let me show the main door dart file which is our entry point where I have just a container set as home okay so we'll be creating new screens all right so these are the three plugins that we are using so let me create a new folder I'm going to name it music player and a screen music player screen door dad okay and I'm gonna create a stateful widget and name it music player screen okay so let's import the material package all right now let's create a simple UI so we need a scaffold with an Abba and the title let's say music player okay and we need a body so let's sit an empty container now with a padding of 20 okay now I'm gonna create a new file called audio player where we will be writing over the background logic for the audio player okay so how do pair dot let's think coat they need a packages here so the first one is the audio service package second one is the just audio package okay so let me show the audio service package so you need to have some prerequisites so if you go to the documentation you will see some of the things that you need to add in the native side so for Android let's open up the hand roid project here so I'm going to open it in the hundreds to do open the androidmanifest.xml file and add these two permissions the big lock and the foreground service permission and inside the application tag you need to have this service and receiver which is responsible for connecting to the audio service in android and the receiver is to receive the actions from the buttons in the lock screen locks and controls okay so in case of iOS so if you go to the documentation this was for Android so okay so we did all these write the manifest changes okay so go down and so saying like we need to help images in these folders so you can add that as well and in the build out cradle set the string resources to false and for iOS let's go to the highest project and go to the info Torpy list for your project so if you have multiple targets the corresponding info dot pill is file add required background modes and inside that add a new item with value audio okay so it's going to say that now let's switch back to the flutter project and let's create the lock screen controls so he is control he is called a media control so the first one is the play control so media control can set the Android icon make sure to add that icon in the drawable folder okay and label play action that would be maybe action dot play okay so similarly we need to have the other controls as well so what are the contours that you need to show up in the lock screen or you want to use it in the lock screen make sure to declare like this okay so second one he is the post control so give it the image pause the next one is the skip to next control okay the next one is the skip to phoebe's control okay and the final one is the stop control MIDI action dot stop okay now we are going to create a class called audio play a task which extends background audio tasks okay so this is going to be a separate thread I'm going to pay some values here so this is a queue with two media items which we are going to play in the player okay so I'll let's play in each of this what our age feels in a short while so let me just declare some variables the first one is a queue index I'm sitting in 2-1 and the audio player so that is a new audio player okay and the next variable audio processing stayed so we're gonna track the audio processing state and pull in playing okay next boolean get hash next that is Q and X plus 1 less than 2 dot length and similarly as previous means a function an arrow function index near 8 times 0 so if it is given extra time 0 then has previous should be true okay and the next function to get that currently the item so Q of Q index okay next we are going to override some functions the first one is on start so on start will take some parameters next one is the on play third one is the on pause and the fourth one is on skip the next the next one is let's say on skip the previous and next is on stop okay so before that let's override on c2 and on click okay and one fast forward on rewind okay so you can override these functions and you can have your logic in each of these functions so this will be triggered when the cost funding actions are triggered from the UI or from the lock screen controls okay all right now let's so we will see what how these are triggered in a short while okay now we need two more variables so the first one is stream substitution of type so we are going to listen to audio playback state so player stayed subscription okay and second one is stream subscription of type audio playback event that is human subscription now we are going to instil eyes it so on start player state subscription is equal to audio player dot playback state stream or there so we are going to listen to the audio complete event okay so state is equal to audio playback state or completed dot listen event so let's rename to state so when playback is completed we are going to call a function handle playback complete okay so we will implement it in a short while now let's implement the on play method okay so if the processing state is null we will set the playing to true and audio player dot play okay so that's going to play the current MIDI item okay and on pause so we will set the playing equal to false and call audio player dot boss okay we have not set the media item in the audio player yet okay we will be doing it in a short while now let's write a new method skip that's going to take the offset okay so we are going to use this method the same method for skip the previous and skip the next okay so that's why the offset so new position is cue index plus offset so we need to set the proper cue index right now we are taking the boarder conditions and if it is not met then we are going to return from there otherwise you're going to check if the playing is null so that's the initial condition we are setting the plane to true otherwise if it is already playing then we will stop the player okay for your player dot stop okay and cue index is equal to a new position and audio processing state is equal to if the offset is greater than 0 then we are skipping to next right otherwise we are skipping to previous okay all right now call audio service dot sorry audio service background dot set me the item so this is how you set the MIDI item for the player to play ok and called audioplayer outset URL media item dot ID okay and setting audio processing state is equal to now so if you want to play then if playing very pleased true call on play otherwise will decide it later okay so unscripted next we'll call skip of one and on skip the previous that will be skip of minus one okay so that's going to set our cue index with proper offset plus one or minus one and it will go to next or previous accordingly right so our skip functionality is complete but you can modify it any way you want okay so this is a basic setup right now I'm going to write a new method called set state with which we are going to update our main UI okay since these are different threads there is no doubt way to update them so audio player so this plug-in however it's a way to update a UI about the state changes okay so this is our method search state it's gonna take the audio processing state duration and the buffered position okay so we are gonna check if the position is null so what we are going to do is sorry the duration is null then duration is equal to let me change the position I think that makes sense so position is equal to audio player dot playback even dot position okay so there is no position then we are utilizing it then so this is how we are going to update a UI so audio player audio service background provides a method called set state that will update the UI so that will send the data to the UI okay so assume it just said in your you so let's set the parameters the first one is a gait controls so we need to get the controls if if the current state is playing so if it is playing then we need to skip to previous control past control stop control and skip the next controller so if it is not playing we will just change the pause control to play control so number we had already declared these controls okay so passing the controls there and the processing state will be so we are gonna check if the processing state that is passed in is null so if it is null then we are going to pass in the audio service background out state or processing state okay so if it is connecting or buffering something like that okay and playing is the playing state so that is passed in so you can have other parameters as well so if you want to send the position can send the position the Speedy's order player dot speed and if you go to the function definition you can see there are system actions that you can send right so let's send the system actions okay so let me send media action dot C to okay so those are the parameters that you want to send to the UI to update your main UI right okay so that is done now we go to a skip we left something there so we can send ready from here so when you skip and if it is not playing we are just sending ready so that also up it's up to you whatever you want you can send it to the UI and you can you I can process according to that okay now let me write so we didn't write the on stock method right so let me write the on stock method so always called avoid super stop okay so I'm setting the playing defaults and audio player dot stop and audio player dot this was and cancel all subscriptions right we didn't initialize the other subscription right so let's initialize that so that will be even subscription is equal to on your player dot so we are going to listen to the playback event state so let's see what are the havens here so let's get the buffering state first so final buffering state is equal to even dot buffering so if it is buffering then audio processing state don't bother him otherwise not okay so let's see what are the other evens so let's write a switch statement with even dot state and the first case is audio playback state dot passed second one is playing and third one is connecting you can even listen to other events as well and the default case okay so when it is passed we are going to send the processing state to the UI so that is the buffering state if it is null then that means we are ready to start playing okay you can send the other parameters as well so if it is playing we are going to do the same so let's send the position also with the set state that is the even dot position since it is paused right we can get the position as well and also the same thing for playing and if it is connecting then we are going to check the processing state instead of buffering state right and send us connecting okay so those were the different states and that's how we update the UI about the state changes in the audio service which is a separate isolate okay and finally audio service background dot said Q so this is how you set the Q in the audio service which is running in the background right so don't forget to add this statement and I'm calling on skip to next when we are starting the player so since it is set to true it's going to start playing from then then okay so we set the URL and we set the playing to troll so that's going to start playing otherwise is going to update the UI that it is ready to start playing okay so let's see what are the other methods that we have not implemented yet right so the cito is one of them so let's add audio player dot seek with the position and on click this is water in the play or pause in the lock screen is clicked the on clip will be called so let's write a new function play pause and I'm going to check if the audio service background dot state dot is playing then we will pause the audio otherwise we are going to play the audio called play pause and you want it okay so let's see what are the other methods that we need to implement so let's implement the handle playback complete method so when an audio is complete we need to play the next audio right so let's check if the if there is something in the queue that means has next then we will do on skip to next otherwise we will stop the audio okay all right now let's implement this c2 functionality for that I am writing a new function future void secret later okay and that's going to be an asynchronous function with the duration of set parameter so a new variable new position is equal to audio player dot playback event dot position plus offset so we are going to check if the new offset that's a new position is less than duration dot zero then we will set in new position sorry new position to duration dot zero okay now we need to check the boundary condition the other boundary condition new position greater than VT item dot duration then new position is equal to media item dot duration and call await audio player dot seek and the new position is audio player dot playback event dot position plus offset okay sorry I made a mistake here so this line it should be outside the if condition so if those two conditions are not met then it will the audio player will say to the new offset correct okay now let's go ahead and use this function seek relate you in the past forward so await sacral a deal and pass in the pass forward interval so you can pass your on value in the audio dot start which we have not written yet okay so this is a default value so similarly for on rewind there will be rewind into one okay let's see what we have done so far initially we declared the media control buttons then we created the audio player task so audio player task will have a cue so here we have a cue with two media items and a cue index to track the index and all your player and audio processing state and we have a method to get the media item and each VD item is identified by the unique ID an album is title album and title is mandatory and we are listening to the states in the player okay and we are updating the UI using the said state method okay so you can update the UI according to your logic so whatever value you want to pass you can pass in alright and also don't forget to set the cue and after that we are skipping to next there we are setting the playing to true so it will start playing finding the new index and if the playing is true then we will so we are setting the media item and URL in the audio player and if the playing is true then it will start playing okay and on stop don't forget to call audio play stock and dispose and also the stop and we have the said state method with which we are updating the UI okay so you can send your parameters with it all right now let's go to the main UI and let's see how we can implement the UI and keep track of the background running audio player okay so I'm setting the container color to white and a child which is a stream builder so the background running audio player is going to communicate with the help of streams to the UI okay so that is why we have a stream builder here and we need to listen to the hot a player streams okay so the audio player has different streams and we can have different stream builders to listen to each stream or we can combine all those streams into one okay so we are going to combine some streams into one and we are going to listen to that okay so let's write a new class audio state you can name it whatever you want okay and that's going to have a list of media item queue and a media item and finally the playback state and a constructor that will accept these three parameters okay okay now let's write a method to combine some streams and we'll pass it through the audio state so stream or your state get I'm gonna name it audio state stream okay now we have to decide what what are the streams that we want to combine so I'm gonna import the audio state and also we will need the RX so we need to import the higher X dot okay all right and our X dot campaign ladies three so we are going to combine three streams so you can use the latest three and passing the types list of media item and second one is the media item and third one is the playback state so we are going to combine these three streams from the audio player and pass it through the audio state okay okay the fourth parameter is the audio state right so after playback state we need to add the audio state and let's see what are the three streams so the first stream is audio so we start cue stream second one is audio service dot current media item stream and third one is the playback state right so Odyssey we start playback stream the three parameters the first one is the cue so that's all you state constructor and third one is the playback state okay and right on the audio state with cue media item and the playback state okay now let's use the stream in our string builder in the UI okay so let me add the audio state in the stream builder and pass in the stream that's the audio state string and stringbuilder will add the Builder property so which will add the context and the snapshot so the snapshot will have the data so audio state is equal to snap data now let's get the other parameters so final Q is equal to audio state dot Q sorry audio state dot Q okay and the third one is final meaty item so that's the current VD item that is playing or paused right so audio state dot media item and the fourth one is the playback State so audio state dot playback State so we got the three values from the streams and we can get the additional data from these three streams so let's get the processing state that will be playback state dot processing state okay so if it is null we are setting in to none okay so so those were the three streams Q stream media item stream and playback State stream okay so you can add more streams if you want you can have a custom stream as well okay so if you want you can go to the library and see what is going on so that is the list of MIDI item second one is the MIDI item and third one is the playback State okay now let's get the playing state as well so final playing is equal to playback state dot playing otherwise it is null we are setting it to false so let's return the view from here so I am returning a container with width as the width of the screen and they column as the child so I'm setting the basic parameters main axis alignment to center and cross axis aligned to sender and the main exercise to maximum and children so I'm gonna check if the processing state is equal to audio processing stage dot none then I'm gonna add a button so let's create a button start audio play button so that's going to start the audio service it's not the play button okay so audio processing state none means the audio service has not started yet so let's return a material button with child a text I'm gonna say start audio player and on press of the button we are going to actually start the whole new service ok so called evade audio so we start start and it should have an entry point so this is is separate isolated okay sorry I let's put it inside a class okay so this is going to be a separate isolate so make sure you write it outside the class so it should be a top-level function or a static method okay so inside this method we are going to call the audio service background dot run that's going to start a new isolate so that's our audio play a task so return the audio player task okay and let's add that method in the audio so you start start and you can have a fast-forward interval or the rewind interval you want to set it you can send it here okay so let me set the Android notification channel name and notification color so you can set any color and any name you want okay and okay so we have the let me set a different color okay so whatever you want and the funny one is the Android notification icon so you need to add this icon in your android project inside the map map folder okay okay and now we have added the start audio play button and he how do service has started already then we need to add the player controls all right so let me add a sized box and a row with main axis alignment Center and children so I'm gonna check if something he's playing then we need to add the sorry if it is not playing then we need to add the play button right and on trusts of the play button we'll call audio service dot play so that's going to call the on play overridden method and so otherwise we need to show the pause button and called pause so similarly we need to have the skip the next hand skip to previous buttons right so let me copy the two buttons and change the name to the icons to skip the previous and the function to skip the previous and skip the next okay now we have three buttons here based on the condition right but we need to have a condition for the skip to previous method right so if the media is the first one then it doesn't make sense to skip the previous correct so return from there and call skip the previous outside and similarly for skip the next we are going to check if community item is the last one then return from there and called the Skipton next outside thief condition okay now let's run the application and see how it works so start audio player button click on that so the audio player has started now and it's actually playing but you won't hear it in the video and I'm skipping to next and if I go to the notification panel you can see the controls here like you see in the Amazon music or any other player right and again fast forward or rewind and if it will continue playing until we kill the app okay now we will see how we can send parameters to the audio player tasks from outside like from the UI right so usually we will be getting the data from outside and we will be sending that to the audio player service correct so here I had hard-coded be media items right so let me copy that and paste it in our main UI so assume that this is coming from a service or your own data source okay and I just emptied the cue in the audio player task class that we created okay so if you roam both the on start method that you override in the audio player task there was a Adams parameter right so so if you look at here in the audio so we start start you can see the same parameters here so that is called the params right so that means we can send parameters to the on start of the audio player task that's a background task using this property right so let's try to send our cue through this parameter okay so for that I am going to create a list of dynamic and the variable name cue list is equal to new list okay and I'm gonna loop through the qra behalf okay so for so we have two items in the queue or a correct so what we are going to do is to look through the array and get each item and I'm gonna convert each item to JSON okay so why I am converting it to JSON is because so if you go to the message code X dot dot and you can see what are the basic parameters that it it can accept okay so if you are sending some wrong parameters or if you are sending some dark objects or your custom objects then it's not going to work okay also it's a thread to thread communication okay and so I added it to the cue list and I'm creating a map of string and the value because the onstart accepts map of string and dynamic gravity right so that should be a colon okay okay they're slow on start map of string and dynamic parameters right now let's accept the data in here and set the queue so I'm just clearing the queue and list immunity item is equal to parameters but I'm so beta right okay so now we got the list the next thing is we need to convert it back to each media item and add it to the queue in the audio player task right so media item is equal to media item dot from json and let's supply this string and then we need to add it to the queue right okay okay so we have the queue here and we are sitting the queue at the end so we're all set now all right so all other things is the same so we are just sending the parameters from outside the audio player task thread okay so you should have all these images and if you go to the documentation you can see in the build-out cradle we need to set these string resources to false Oh casing the project and iOS we already said so make sure you have the proper images over Android and this manifest not xml entries okay all right so this is going to work the same way as we did earlier so if you want to skip to a new item in particular mediator you can use skipped it you item and you need to override once qtq item and you want to set the URL of the audio player to that media ID and call on play so that's up to you whatever you logically want you can implement it there and the main thing is if we don't want the player and if you are exiting from this screen we have to stop the player right and you have to release the memory so I'm gonna write the dispose method wanna overwrite that is first method for the screen and let's suppose I am I am going away from this screen end and I don't want the player so I'm just calling notice a restart stop so you may want to check if it is already playing or some checks you want you can now always add that so it is not playing then you just want to check what is service dot playback state he is playing or not then you want to stop it or pause it okay so you need to handle sets if you want so so those are the clean up book you want to do okay so it's going to work the same way so it's actually playing and I'm gonna skip to the next item and pass item so everything is working code and if I look at a notification screen you can see the player running and it's playing so you can pause or fast-forward or whatever you want to do we can do it okay so that was a basic example of how to create a background running music player okay so I'll be providing the link to the plugins that are used and the link to the source code for this demo in the description below this video and in the source code I have also had at AC got to drag the audio to a position and play from there okay I'm not showing that in this video so this video is already lengthy okay so I don't want to extend it further if you want me to do a tutorial on a specific topic please feel free to comment it below this video and I will try my best to create one if this video is useful for you please support me by subscribing to my channel and also like and share the video and finally thanks for watching and see you in the next video until then bye

Channel: Mobile Programmer

Views: 22,463

Keywords: Flutter tutorial, flutter example, Google Flutter, Google dart, Flutter dart, isolates, Background Task, Audio Player, Amazon Music, android examples, ios examples, android tutorials, flutter audio player, flutter media player, flutter audio service example, play music in flutter, play audio in flutter, audio player flutter example, assets audio player flutter, flutter audio player tutorial, flutter audio player from url, flutter local audio player

Id: fsRKXLsoTrA

Length: 44min 20sec (2660 seconds)

Published: Sun Jun 21 2020