Learn React & Context API by Making an Audio Player

alright so hi everybody welcome in this one we're going to make this an audio player we react using the contrast api as the global state of the application going to see how to list the array of songs and have the right functionality of them when we click on any of them also we're going to see how to create the previous and back buttons and have the randomizer and cycle buttons but mainly you're going to see how to use the context api and a global player state to handle all the necessary things of the audio player so i think this is going to be a long one of a crash course of doing a lot of things in drag so i hope you enjoy and let's start making this audio player we're going to create a react app so we're going to do npx create and we're going to give it a name in this case all right so we have our basic application here going to remove some basic things to get started i'm going to start the development server doing mpm start and i'm going to remove from the basic application i'm going to i'm going to use font awesome to put icons in the application you can get your own javascript link in front awesome.com going to change the title okay so if we were going to create the main component called audioplayer.js make sure it's in the source all right um what we're going to do is give it the basic function here so let okay basic function don't forget to import direct this is going to return now the i'm going to bastard there right now in the in our index gs file we're going to change up to an audio player and import it here save we see that we didn't export our players so we do export sport default audio player we save and we see that we have our id up here awesome now we're going to remove something that we don't need here awesome now we don't need to change the index js file anymore and we're going to center our attention in this one what we're going to do now is uh grab our ccs files that i've created for the project and going to to explain the css what we're going to do is have it all in the page already and each time and introduce something i will see how the css is affecting the element using the expector of the browser in that way i think it's a better interactive way of explaining how the css is working so what i'm going to do is drag those two files one is for modifying the inputs we're going to see in a moment and the other one is the main css for all the application now in the main component of the application i'm going to import those files all right so in the main d we're going to give it a class name of audio player and inside this one we're going to have another div with the class name off inside content here we're going to have the header component we're going to have the action actions component and the playlist i'm going to create this in a moment for now to not break the page we're going to command this and outside this inside container we're going to have the controls that is going to be the more complicated component of all of them but um we're going to go slowly so we can understand it all right so you can see you can see nothing all right let's start with the header uh component we're going to create a folder called component i'm going to create the file header dot gs and here we're going to have our header first we're going to import react and then we're going to create the function of the header so let's split header into function all right this one is very simple we're going to have only a header with an h3 that is going to say react wave and later on we're going to put here the current we're going to put the current playing song here but that's going to be later and to finish this component i'm going to export default and header save and here we remove the commands and we can actually if you hit ctrl space you can go and i would import here and it's going to import the header sure it puts the interact name so i had a little arrow here so you don't need to pull curly braces here so it is only um parenthesis right now it's not looking so great because we need the other things right now let's start making the actions component so what we're going to do is first create the file here but first we're going to create another folder called playlist so we can organize a little bit better here in file actions yes going to import react from act we create the actions function here let's return a div and let's export default actions save and remove the commands here ctrl space i would import save we should have something here so to explain the css a little bit here that we have a couple of things we have the audio player that is going to have uh this reflex and the flex direction is going to be a column so the elements are going to stack into each other in a vertical direction and then we have a 100 view height so it's going to expand all the height of the current viewport and we're going to have the inside content that is going to have a width of 80 viewport width this reflex the flex direction is going to be a column the justify content is going to be spaced evenly flex grow is one so it's going to expand all the space that uh is available in the the flex element and it's going to have a padding of 120 pixels we're going to see that later it's going to be because of the controls that is going to be on top of the page we need some uh 120 pixels padding there okay now we're going to put something here so we can see what's up so the class name of this is going to be shockingly enough actions and i'm going to copy a couple of things here first of all we're going to have an image a standard image here that is from free music archive we're going to have div i'm going to use uh the functionality of emmett you can go div dot album i want to get the the name correct here our meta i'm going to then it's going to have a span and h1 we put it there here let's save and see how it's looking and it's looking already good now we're going to see the css in a moment and then we're going to have going to copy this to keep it a little bit short because uh this little bit of repetitive we're going to have a div with the class of action buttons we're going to have three buttons with the on click of fab that is like a dummy function here that is going to print to the console and we're going to use font awesome to give it three icons let's see how it's looking and as you can see there is our three buttons let's see how this is stylized so we have the actions i think yeah so we have here a flex direction and a lag eaton's center this is for well you can see in the browser for the all in the same plane and if you go here the image doesn't have any styling the albumeta is going to have a batting and the action button is going to be flex with a flex directional row and a flex 1 1 so it is growing you can actually see it here if you do as you can see it expands the way uh all the way that it needs or that it has and it is useful to have that because the justify center needs to to be all the way okay we're making good progress now we're going to see how to make the playlist component but with all that i'm going to create a folder inside this source called context and here this folder is going to be the files for the for the context api but first i'm going to create a file that is going to contain an array for all the songs okay in practice this should be uh an apo call or some you you retrieve this from an endpoint but for the sake of this tutorial we're going to hardcode it here so we have a song list and we have a title arts name album title and the file url of the song okay we are using free music archive and that's it now we can start implementing our playlist component all right as the other ones we're going to do the same so i'm going to do video skip here all right so we have here or the empty div of the playlist and now we're going to start creating things here first of all we're going to put the class name here of playlist now we're going to use an unoral list here with the class name of list of items loi and we're going to here use the map function from the songs list okay and we're going to map um okay songs list we're going to give it a function and this one we're going to have the song and the current index from the so for the song uh we're going to complete the function here and for a song we're going to create a list item and for now we're going to give it a class name of song container okay now we're going to import songs list from the dot dot dot context song and it's supposed to be songs win an s okay so we fix that all right so i had a typo here it was supposed to be songs underscore list from the songs uh from the songs file now in a moment we're going to extract this from the context from the player state the general blaster from but for now to create this part we're going to use it like locally in this example here this part i'm going to copy uh the content and explain it here let's see all right so we're going to have so we're going to have a first tip that is going to be an icon that is going to be appear in front of the image you're going to see that in a moment and then we're going to have uh the song mera playlist div that's going to hold the song title and the artist name and then i'm going to have two buttons one two give it a heart and one two i don't remember so let's see oh yeah to sort of to open like a box of options here they are not uh these buttons are not going to have functionality for this uh project but they are there for an example okay so how this is stylized let's take a look so have the playlist dip there's going to be a flex display flex a flex direction column and it's going to be flex one one so it's going to go grow one shrink one inside the playlist we have the list of items that is going to be flex now is is going to have margin 0 and auto so it's going to be in the center flex direction column flex 1 1 padding 0 and width of 70 wing whipper width so it is like a little bit um smaller okay so now let's see each container list so you have two style for this one is going to be for the alignment uh so it's going to align the things in the center it's going to be flex row and it's going to be have a font weight of 450 i think this doesn't do much margin to pixels from all sides and it's going to have the correson pointer so we have the pointer and you can select the text so inside of each song containers we're going to have the tomlight song that is going to be a div with the background of the current um of the chord album it's going to be this reflex center alignment center so as you can see the little icon is in the center then i'm going to have the song mirror again it's going to be a flex and a column so the title on the art is it's side by side and then you have the buttons that are going to simply have a margin right of 15 pixels and that's it for the playlist now we're going to come back here once we have the context api because we need a way to click the song in the playlist and start playing and also a way of showing that the who is the querying song being played so all right so before doing the control component we're going to implement the basic idea of the context api we're going to need three files we're going to need the player context the player state this is going to be a component and the player layer reducer that's going to be a function let's start with the context so in this file we're going to declare our context so we can use that in all the files that we need going to import create context from react we defined the constant of player context and we assign the create context then to finish this part we simply export it as default and we don't need to touch this file anymore now let's see the player reducer this is going to be simply a function that is going to be the reducer function for updating the state of the application so we're going to create the player reducer we're going to ask for a state an action the action is going to be an object that is going to have the type and a data attribute as we can have only one function and multiple actions okay so before doing this we export as default the function and now we're going to see what is inside of it so here we're going to use a switch that is going to be dependent on the type of the action i'm going to use case with the switch here i'm going to ask for a string we're going to match a string for example first i'm going to set the songs array and this what it's going to do is return a single object that first we're going to spread the state so we copy the whole scene this object and we change the songs to actions the data clips didn't mean to do that action dot data okay so to better understand what this function does i encourage you to look up the reducer function from for race of native javascript it is exactly the same but instead of doing so the the updating in an array to to have a single a single value at the end in this case we graph the state and we change the state to have sort of that dynamic but in a sense is the same a reducer that graphs the current state and puts new data in it and it returns the new state with the new data okay so to save a little time here i'm going to paste the whole switch here and each time we use this going to showcase it but basically it's the same when we want to set the songs array we spread the state and we put in the songs the action.data and for example said current song with the same the correct song is going to be in the action data and we're going to and we're going to change the playing to true and the same with the other ones and as you can see it's very similar to the other ones but now we're going to see the player state this is going to be the the state of the whole application so first we're going to import react i'm going to import the use reducer uh hug i'm going to import the player producer and the player also in the playstyle we're going to import the songs list so we can have the state the songs in the state as i mentioned player state is a component so we're going to create a function component you need to put the props here and an object that is going to have the initial state of the application i'm going to copy this for our initial state we're going to have the current song as the first one the songs list at the song list array repeat to false random defaults and play it false and the audio okay that's it now we're going to use the use reducer to update the state so we give it the function player reducer here and the initial state i'm going to use i'm going to use the state that's or current state of the application and the dispatch is the way of telling use reducer to execute the player reducer function and update the state okay now in a moment we're going to populate this with functions but for now we're going to return the provider for this state so i'm going to say player context dot provider and in the value here this is important part because all the accessible state of the application is going to be here if it's not here and the value prop is not going to be accessible in the other parts of the application so for now we're going to have the states of the application in a moment we're going to put function here basically we have the current song the songs lead the repeat random plane and audio when you access these state variables in other parts of the application the name that you need to put the name that you need to refer to them is this one so you can put different names here and that's it now i'm going to close this and i don't know why but this was in the in a dog so so you need to put props children finally we export alt and player date okay it's not going to do anything because we didn't use it but now we're going to go to audio player and wrap or our whole application with the player state component okay let's see if we have any errors here sometimes you need to restart the server okay so i do type the rock here and now it's working so first we're going to go to the playlist how do we retrieve the information of the player state i'm going to import the player context prompt we need to use relatives here context layer context we're going to comment here and inside we're going to change parenthesis for curl braces so we can put a variable here i'm going to use the context so we set constant lungs list and use this context and the constants and we put here the player context so we what we're doing here which is wrong so what we are doing here is saying okay give me some list of the player context using the use context hook here and this is a way of deconstructing the data that we have now to finish the playlist component and to go to the player state and create the set current function so we are here that current is going to be a function now we give the id and we usually dispatch and give the dispatch type and copy this because need to be exact this will give it the type and the data is going to be in the id all right also don't forget to put it in the value of the provider so we have access so current awesome now in the playlist we're going to retrieve song list and current song and also set current awesome in the list item we're going to change the class name and we're going to add here a little directionary operator know how to say that but um so basically we're going to select the current one if the index matches the current song id so if the current song is equal to the current index we're going to give at here a selected class otherwise we don't do anything now we're going to give it a key i think i i supposed to do that earlier but we're doing it now and on click event we give it a function an anonymous function because we need to uh use the set current function with the current id and we say now let's see if what we did is working so here don't forget to give a space because we are adding this string to the other string and we need to have a space here to make it more obvious we could do something like this but this is a little bit a little bit ugly so don't forget to put the space here and now it is working okay so with that we finished the playlist component and now we're going to go to the more a harder that is going to take more time to explain that is going to be the controls component so i'm going to get the basic component here so we have the control component here and there is is nothing that there is nothing but um div at the moment but it is already in the page and as you can see it's floating so it is this reflex with a flex directional row a height of 110 pixels the background color of the text white align items in the center the width of the 100 of the viewport and the most important part here the position fixed to the bottom and the left okay awesome so let's begin uh putting all the controls the functions and the good stuff here all right so but first we're going to create some functions in our state so we can control the application in the control component first of all we're going to create a function that we are not going to use but for sake of completion we're going to create it here to update the songs list okay so we're going to put here set songs all right once uh songs set and she's going to save the songs new songs away and this is going to dispatch all right so with this function we basically give the songs away and the type is it is said songs array i'll release it here it's going to update the songs all right in this case we need to change it to songs list so it's going to change the song list there you go as i said we're not going to use this function but you could use it with an api or something like that now we're going to create the toggle playing function that is going to toggle between plane and the pause state of the player so this is similar to the other ones but basically here in the data we check the current state of the playing so if this is true it's going to go false and if it's false it's going to go to the true we can do also not playing that is going to cycle also but i wanted to do it a little more intuitive and visualize that it's going to false and true when the state changes so this is triggering the total playing in the reducer is changing toggle playing so the playing data here is changing the playing and it's going to start from false now to save a little bit of time i'm going to copy this function and showcase it because there's no point in me typing it now we are using the current function that we have in a new function for example the previous song uses if we are in the beginning is going to go to the last one otherwise it's going to grab the current song and subtract 1 so it's going to go to the one below it now we have next song is pretty similar we check if the current song is the length of the of the list uh minus one because this is an id and this is the length that counts the zero element and if it is in the so if it is the last song it's going to set the current to the first one and if if not it's going to go one along now the toggle repeat and the two random are very similar to the toggle playing but essentially it's going for essentially this uh send the toggle repeat onto a random message to the player producer so we have here title random and i will repeat that uh update the random and repeat variable here all right so for this lag function we're going to type it around so it is going to be from the end of the song so we put const bundle and and it's going to be a function okay so what this function is going to do basically is handle the when a song ends so what we need to check for first of all we need to check if the state random is true she's going to go in this part of the if statement and we're going to return the dispatch of said current song but we're going to give it a random number between the length of the songs array and we're going to do a floor here so we send integers because these are going to be ids in the array we do one else here if we random is not true it's going to be normal now we need to check if repeat it is um checked this is a simple logic because there is a couple of minor things to look at but the basic idea is to respect the buttons idea and don't make it that complicated so let's start this part so if the state repeat is true we're going to go to the next song we're going to use this function now if we don't have repeat and we check that the current song is equal to the song list length so it is the final song what we're going to do is return with nothing okay and basically it's going to end the playlist and we do a catch here if there's any errors and we go to nexon all right so basically these are all the functions that we're going to use and to be able to use in other components we're going to declare them here all right now it's time to see how we do the controls we're going to start by creating an audio tag here and what we're going to do is this is the important part of the audio player is the audio tag that plays the songs right so we can do this pure javascript but i found this way of doing it that i think is an easy way so we basically here going to populate the audio tag with a bunch of events and control all the necessary aspects of the audio with this stack to do that we need a reference so we're going to create a reference and here to do that we're going to use the use rifle so let's create that here okay so with this reference we can change the audio or we can well reference the audio tag and use the functions of it right before creating the events let's put something in in the page so first of all let's see the volume element that we're going to have a div with a spam with a span that is going to have the volume icon and then an input that is going to have the value of the state volume that we're going to create in a moment and the hundred volume function they're going to that's going to get the target value and divided by 100 this is the event the target is the input to that uh we're going to use the use statehook to create a local state and also i'm going to import the other hooks that we're going to use so so we have all the necessary things also that we we are here we're going to import the global state from the player context that we had so all of these functions some values are the things that we have here okay now we need to create the 100 volume function but before doing that we're going to declare three state variable here so state volume and the duration and the current time and this all uses the u state hook so basically with this function we can update this variable here in a local state all right so now we're going to use a hundred volume that is basically going to use the set state volume to change this so when we change uh this input it's going to be handled by this function and what is going to basically do is change the state volume and it's going to change the volume in the audio tag as you can see this is the way we use the reference hook and as you can see here we have i think you can see it uh the volume and you can see that it has a little bit of an animation basically we expand the div of the this div the volume there when you hover over it and it's going to expand it's a simple cover animation if we check the hover here you can see that the width is 90 pixels if we uncheck this it's going to retract and it has a and it has a transition of all 500 milliseconds so it is an animation right let's move along to the controls reply and play next and previous so we have here our music controls we have a div with mission controls of class name uh we then have previous button here that is going to that is going to execute the perp song on the on click event then we have then we have the play button that went unclicked as you can see we have here toggle playing and toggle audio that toggle play this is the variable in the context api and to the audio we're going to do it right now so you have const toggle audio function and what this function does is reference the audio tag and change if it is paused is going to play it and otherwise it's going to go pause all right and as you can see we have our buttons there so we have so here we precarious there you go so we have our music controls that are going to have a margin left of 90 pixels and i mean with 120 pixels then and there is not much about these three buttons other than that a little bit of stunning and batting when you do the play button you can see that we have this class name here so basically we're going to toggle between the play and both uh icons here uh it's a basic basic trick here we use this operator to change given the playing value we hide or don't put anything in the class name so we change between those two icons alright awesome we have here our progress bar let's dive in so first of all we have the div or the progress bar first we have the song mera uh so that is the song title and the soon artist so we get that from the the player state from the songs list we access to the current song and the two occurrences are we get the title and exactly the same with the artist's name then we have the progress bar that is going the thing that is going to show right in the top there's going to be a progress that's going to be a progress tag and here there is some arithmetic that basically we need to have a percentage to the value of the progress so we have the current value we multiply it by 100 and we divide by the total direction otherwise if there's no duration it is zero the maximum is 100 so 100 and when you go on click so when you click on the progress bar we're going to hand the progress and move where the cursor is so we get here uh the client x and the target offset left so basically we have the client x is the mouse and the target of the left is where the left of the element is and we have like a coordinate from the left of the screen to the mouse and then we we grab the offset width so the total length of the progress bar so the total weight of the progress bar and we divided by that and we have that as a percentage we multiply that by a hundred and we have the percentage as a range from 1 to 100 and we give that to the 100 progress function lastly we have here the time so the current time and the total time i go into this function i get from the from the web so basically we give a total second to this function and it's going to give us like a nice format y okay now we're going to see these two functions that we mentioned first of all the handle progress so we grab the handle progress first we compute so i noticed that i was doing extra work here by multiplying and dividing by 100 so i changed that so basically we have a value that is a percentage zero to one we multiply that to the total duration and we have like the that that percentage of the duration we set the current time to that compute and the current time of the audio tag to that compute so to that value and that's it now this function i got from somewhere basically we give a total seconds and this function gives a format from i think it is 60 to 60 like a format like that right or 59 i think the 59 uh range uh so that's basically it and i'm not going to try to explain this function because i think i know how it's working but ah you know there is a lot of compacting here that i might not be uh explaining that well so the function it basically does that we give it a total seconds and it gives us a nice format all right so we save this and we can see that uh we have our thing going on all right to finish the elements uh we have our two buttons here that on the on click event execute toggle random and repeat and give a font awesome icon and we use the same trick to make an active on node active with this ternary operator you can see that they are working there is not much to this that is a couple of divs with uh flex and things like that now let's start making the functionality so the audio player can work so what events we want here first of all on time update this this event is when the player change the time so when it's playing we're going to give it give it a function going to grab the event and we're going to set current time to e the target the current time all right then on can play this is when the audio tag is loaded with the song we're going to again give it a function all right and this time it's going to set the duration to the e target dot duration so we have the duration of the song these two function are the functions of the uh local state sort of so to speak then on ended we execute the handle and function of the player state so this function right here and that's it for the event now we're going to put some normal tags here so the type of the song is going to be audio.mpeg then we have preload true we have the audio preloaded and the most important tag the source tag so songs list we're going to grab the current song id and file url okay now let's see as you can see here we have the source and the audio tag and we can take a look at the songs all right once more to see that the file url we have the file mp3 file here okay so let's see if we don't have any errors and this thing works all right that's that's awesome let's see that the plate is working all right so we have a little bit of a thing here supposed to play when you hit in the player and maybe it takes a little while i think i forgot to oh yeah so i have a duplicate here and i forgot to include the next song so it wasn't available in the other part of the application so this should be working now so at least we can see that that's working so now that is all working we're going to finish it off with putting the title on the header so in the header component we import the player context we create restore we need to put curly braces here and move this but first of all we we grab the current song and the song list we need to grab this and return it and put in the title the golden song being displayed and as you can see we have the current song so that's about it i think i have actually have a book so i'm going to try to fix it but if you uh look at the github repository this error here it's not going to be there so you can clone that and play with it and learn all the stuff you want so let's put it in the bigger picture here we basically we have done this so hope you have enjoyed this video if you did consider giving a like and subscribe to the channel that i'm going to make more project style videos like this and also more development and general programming stuff and things that i like and that's it for me see you in the next one bye

Channel: RamgenDeploy

Views: 401

Keywords: Tutorials, programming, computer science, react, JavaScript, programing, making of, coding, css, web development, web, HTML, vs code, slideshow, Audio player, context api, react advance

Id: SUtkfXsvyaU

Length: 40min 41sec (2441 seconds)

Published: Mon Sep 20 2021