Building a Music Player in VUE.JS & Tailwind CSS | Manoj Singh Negi | Recraft Relic

hey guys welcome to the graphic channel and i hope you are doing well so today i am here again with a new live coding session and today we are going to build a music app in vue.js all right so let's get started i already have uh you know dummy vue.js uh project here and uh let me start it yan so right so the project is getting started and it will open in the port i think localhost 8081 so let us start um it will be localhost localhost 8.081 right so i have this dummy app now let's uh you know start building our music application if you already have seen the posters and the images that have put put you know you uh you know that we will basically going to build a list and uh then we are going to you know build a player firstly there will be a song list and there will be a player so first and foremost we're going to create the list component so let's start by creating a component so inside the component folder we'll go we'll create song list dot viewey and uh we'll you know start building this component so we have a template we have a div which will be the list and uh you know then we'll basically you know export this so export default name name of the component will be song list and yeah let's uh import it and see how it works so i'm going to go here import song list from uh dot slash song list components song list and then we are going to use the song list inside here okay so yeah we imported our songs but it doesn't show any show anything because you know we are doing not doing uh we haven't uh have anything here so i just if i type songwrist there is songlist one other thing is that we are going to use tailwind css for our styling which i already have included in my index.html so this is basically the link to tailwind css uh it is cdn hosted i'll also put this link in the description if you don't if you are not able to get it so now let's start by styling our app so first and foremost i want to style the you know uh the contain of the app container so let's start that by uh giving this you know class so i'm giving going to give it uh like app a class of app container i'm going to give it a bit padding and i'm going to use tailwind class pg black to give it a background black so you can see uh you know the black background here the other thing that i want to do is i want to give it static width and height so for that i will use css so app container and its width width will be 350 pixel and the height will be um 700 pixel right so something like this but i want it to be centered so for that i will give it margin auto or i can just go here and say i'm auto because tailwind i already have a class for that so now we have this vertical uh looking application and this is the look that we are going for so this is uh our app so now let's uh go inside song list and create our list all right so we have to create so i'm going to create a demo list you know for the list of the song that we are going to display and so and in the list every song will have its name its uh you know its album uh image album name ear artist and so on so lets uh define that i am going to define that inside the local state which is inside the data so data return list and inside the list there will be objects so i have a dummy list already here which i'm just going to copy and paste i'll paste this list in the descriptions as well if you need it so uh there it go okay um [Music] all right so i'm just going to paste it so as you can see every uh song have a id for you know a unique identifier then there is name the artist name the album the year where the when the song was launched um source uh this is basically the album uh image that we're going to show and then there this is the song source so all of these files are like hosted on the internet so they are not local files and these are this is just uh unsplash so i'm using unsplash api to generate random images for the album uh as you can see here so we have our list let's try to render it okay um let's remove this for now and let's uh start right so we'll create a div and we will map it using v4 so v4 song in list right and the uh the key will be v bind key uh not like this v bind key will be song dot id right and we are going to just render the song name okay so let's just do that render the song name song dot name okay song dot name save it um we are not able to see it because you know it's in black so let's uh give our song you know a bit color like the text color so i'm just going to go with color equal to let's give it yellow text yellow maybe 300 so not color it should be class name right so class name class as you can see so texture 300 basically is a tailwind um class i'll link the documentation of television in the description so you guys can go and have a look so text yellow 300 and this looks good let's instead of pu spans because they are like much more less bloated so span um right what the uh what else i want to show is the you know the artist name the album and the year which will be in the next line so i'm just going to say span right span uh i'm going to say uh song dot artist name right a test name and uh then the the song dot uh album name right song dot album name and then so uh you know the year with when the song was launched so song dot ear basically and let's see how that uh pan out again you know the color we have to give it so i'm going to give it a bit different color so i'm just going to give it gray text gray 200 let's say right and you can see you know all of these but i want them in the next line so i'm just going to uh you know br it so i'm just going to put a break line okay so i'm just going to put a break line but all right this looks good but what i want to do is i want to um you know like decrease the font size so the name is more prominent so let's do that um so i'm just going to do text access to decrease the font size right and what i want to do is um i i want to differentiate between the artist name and the you know and the album so what i am basically going to do is uh uh i'm going to like change color i guess let's uh keep it in a new line [Music] here as well so what i'm going to do is pan span i'm going to paste it and then classmate class will be text gray 400 let's see how that works yeah so you can see you know this this is more uh you know prominent now and this is not that prominent and i'm going to put the ear in the bracket in order to uh to you know make it clear that it's uh like the launch here right okay so now this looks good the other thing that i want to do is i want to put the image this album image here so let's do that um so i'm going to put everything uh all of this inside a div right um [Music] okay and then i'm going to put another div here which will hold my image so i image src i will give that in a bit so src uh yeah there okay src so we have to bind the src because we we are going to use like a you know a variable from the state adjusted expression so we have to bind it so we bind uh the um in a source and then we say song dot src right this should work yeah let's see how that goes reload the app okay you can see the images but yeah this is not how we want it so what i'm going to do is i'm going to put some constraint here give it width and height so i'm going to use tailwind class here so class equal to 4 height and width so i'm just going to give it a max height of 12 right so it will basically trim down to this size and then i'm going to make it rounded you know to have nice you know rounded corners and now i want it to be here so for that what i'm going to do is um this div which is mapping i'm just going to refactor it a bit one sec so this div i'm going to give it a display flat so class equal to flex flex row all of these are tailwind classes and tail bit and make it very much easier to you know style your application without writing any you know custom css so that's great flex throw and then justify between so basically what will happen as you can see that i i told the uh you know i told the div that uh uh using the element the class names i told that this will have a flex uh display and because it's have a flex display we can just uh render everything in a row that's why i give one the uh class name flex row and then i said that you know the put the space between justify space between between the between or both of the you know elements uh so that you know everything uh goes left extreme left or right so i just use justify written but you know there is no space in here so what i'm going to do is i'm going to provide some margin to the bottom let's say you know maybe four yeah and this is another you know uh tailwind class mb4 which is like margin bottom uh you know to the fourth degree so this is uh it so yeah list looks good but uh you know i'm not able to like when i hover it uh the cursor is not changing so for that i'm just going to say cursor pointer another you know tailwind class cursor pointer and uh now you can see you know the my cursor is being there the other thing that i want to do is i want to put a title at the top which will say vue.js music application or vue.js music app so for that i'm just going to go here create a div right um i'm going to create a div and just write vue.js music app right um save it it will not be will show here because it's in black so first let's uh give it um some color so i'm going to go with the theme color which is yellow so text yellow 300 so i want to make it bold so font bold another tailwind class font bold uh right now i want to it to be in the center text center and i want its uh you know font size to be a bit bigger so i'm going to use text 3xl you know to make it bigger and then i'm going to give it some margin so from maybe for margin i can give like maybe four and from top let's give it to uh maybe three right so yeah so you can see the music app maybe i can give more margin from the bottom it's not looking that good six right uh or maybe seven i think they're really much better yeah so this is basically the you know uh our you know list right now let's uh build our player which will be the next screen so what i'm going to do is i'm going to keep a variable in the state which will control when to show the list and when to show the player so if a song is selected we'll show the player if it is not then we'll show the you know this list so i'm going to take a new variable called uh is player of vision visible which is false by default and i'm going to hide and i'm going to hide this container when not is playing visible all right so when is playing is not visible then it will show which is by default fall so if i reload the application it will show me the um you know the uh the container but if i make it true if i make it true reload the application again ah is player visible uh is playing visible yeah so now if i reload it so you can see the application you know the uh list has been uh hidden so for now let's just uh make it false now the next thing that we have to do is we have to create our another component which is the player component so let's create another div here and uh will only show this when the is player visible is true this will be song player right and i'm going to import this you know i'm going to create a component here first song player dot viewing right and then i'm going to import it import song player from dot slash song player dot viewe right and then i'm going to register that component components and then use it which is already being used but i'm going to go inside the song player i'm going to create a template just say dev and just say player script right on script export default um name will be song player song player and then i'm just going to use it which i'm already using so let's make this false on i mean true and let's see if that works yeah you can see you know the component being rendered here so now what i'm going to do is i'm going to uh you know start building this component the ui will be simple simple we'll have a back button here uh the image of the album will be here there will be the name artist name album name and the year and then there will be our controls okay so let's start by creating our back button i'll just here so what i'm going to do here is a simple div right a div a simple div and uh inside that div there will be a button which will have the text back and basically on its click you know the element will go back like the ui will go back right obviously this uh you know the uh the color of uh the text we have to change so class equal to text white so let's just see if it works yeah you can see the back button right next thing i want to do is i want to show the app name here here so what i'm going to just going to do is i'm going to create a dev um say view js music app and uh yeah but i want to render it like there so i'm just i'm just going to give it the same css uh same uh you know feel as the previous title which will be text yellow yellow um 300 font bold i don't want the title to be uh you know too big so i'm just going to give it text one excel right on this will be font bold right and uh the next thing i want is to render it in the front so to the parent i will give flex flex row and the justified between right and it will move the vue.js music app to the top in the front basically so now we have our header now let's go and build our uh you know center where we will display the album and everything so we have the div now let's uh show our image here we have to bind the uh you know the src we'll get to that in a second so in order to pass the song from there from that parent comment to here we have to use props but uh let's just um do this for now and now i have to define the prop basically right so let's go ahead and define our props uh we already have that comma props we'll have the um so i'm going to define the type drop song which have this type so id will be a number id will be a number here will be a number and everything else will be a string right um string string string string and a string right great so now we have our props defined now let's pass that prop from the parent component to here so let's bind we bind song all right so now we also have to define like what is the current song which is playing for that i'm also going to you know keep a state variable called current song index which is uh by default zero right so i'm going to pass that song here so for that i'm just going to do list current song index basically right and it should pass the you know the song to the yeah it do so you can see so let's do one thing um so if i change it to one and reload the page so you can you will able to see a new image here because you know the song index is basically changing but for now let's keep it zero i will uh you know get back to how we'll going to you know click on any item and it will show here we'll get to that in the later part but for now let's just go with zero and uh styler component all right so if i go inside song player now this image what i want to do uh in this um you know image is i'm going to give it rounded borders so class rounded okay i haven't uh yeah so rounded and i'm going to give it some you know margin top and bottom right so margin top will be eight and then margin bottom will be four let's go with the four and yeah you can see you know it's like being sliding down so that's great now let's div you know let's see how our title and everything will show up so we'll define another div for that right and then i'll define my you know items basically so p class class equal to class equal to text yellow text yellow and uh 300 and basically the item will be the song dot name write song dot name and uh then you can see that there then we'll show this song dot artist name with the album name so i'm just going to do it something like this song dot album name song dot album name and then song dot ear at the last right so let's uh go with that and the other thing that i want to do is i want to give them different colors so to differentiate between them so let's do one thing uh let's give it gray as same as we were doing in the list so gray 200 and then gray 400 so let's do grade 200 and gray 400 and uh yeah let's see okay so this looks good the other thing that i want to do is i want to get you know keep them in the center so basically class equal to um text center so that's good text center let's see if that works yeah so they are in the center now now this looks good the next thing is um is that we want to build our controls right um so yeah i mean this looks fine one other thing that i want to do is i want to make this title bold font bold so song dot name let's see yeah i think it looks good it's good to you know it's easier to differentiate between them so let's um now create another div here which will basically be our controls div and let's create three on other days so for example first day will be for the next icon uh previous icon the second will be for the play and the third will be for the you know a previous for the next so inside there uh there will be a button right a button what i'm doing so button which will be previous then there will be a button for the play then uh yeah for the play and then there will be for next right so previous play and next the play button will have a different uh you know ui i want it to be like look around a big round button so let's do that in order to do that i'm going to give some classes to it so let's see uh class equal to firstly and foremost it will be rounded full you know fully rounded surrounded full its bg color will be um yellow bg yellow or 300 same as the uh the you know theme color then its height will be 24 and then width will be 24 so both of these are like the tailwind classes and then uh you know the text white doesn't look good so text black so let's see how that looks right and the last thing is font bold you know because i want it to be bold and yeah so it's bold now right so now we have the play button and we have the bold right but they are not like you know they are not in like the same line so we have to put them in the same line in order to do that what i'm going to do is um i'm going to give it i'm going to use a tailwind class called grid class equal to grid and i'm going to define that you know what this grid this grid have three items all right so grid calls three so they should have equal width and they will go like this but now you know they are not like in you know in the center and stuff for that for to every day we have to give a flex class for example flex and we'll say item center which is the same as align item center and then justify center which is same as justify content center justify center so justify center we are going to do the same thing with this div as well and then this div as well what happened all right right so let's see if that works okay let's see and yeah you can see you know it's in the center you know the previously next and stuff but there is no you know uh margin between the uh year and the control so i'm just going to give it margin top 10 degree so it will you know come down so now we have everything in place all of our ui is looking good right but now what i want to do is i want to actually make the functionality working so for that first and foremost i want to make this back button working so once we click on this back button it should go back for that i'm going to create uh i'm going to emit a event which you know i will listen at in the parent and then you know do the because the variable which controls the uh visibility of the player and the list will be controlled in the parent the variable is in the parent so i'm going i have to modify it there so firstly and foremost i'm going to define a method methods right and i'm going to say go back will emit this dot dollar it i might go back okay and i'm going to register that amit as well in the so you know if i don't do that then it's going to give me a warning so i don't want that so go back go back right and in the song list component i'm going to say at add go back right at go back um just a second guys just a second sorry for that um so i'd go back we'll just say is player visible equals to not is player player visible all right so will that work let's see i think this work because uh view supports you know uh js expressions like this so let's see if that works i'm just going to reload the application and let's see if that works so on back click uh nothing happens all right let me see why that is player visible right i'm just okay um let's me inspect you know if i'm doing anything wrong or is it or if it is generating any error right i know what section so i i always do this and it's kind of irritating but i create everything you know but i don't uh actually you know bind the click event so class not class v on click equal to go back so it have to call the go back method which i just defined so i'm just going to close this reload the you know music app let it load and then click on back and it will go back so what basically we did is whenever we click on the go back button uh back button here we'll emit the go back event and we will listen for the go back event here and we'll just make it you know is a player visible to you know right so now let's uh yeah so now the next thing what we have to do is whenever we click on this we want the you know song to be selected and uh you know we have to open the player so we'll do that by whenever so we'll create a method here methods and the method will be play song right play song it will take the index and set the this dot current song index to be equal to that index and set this dot is play uh is the player visible equals to true all right so yeah and now i have to uh first and foremost i'm going to make it false right now in this you know in this loop what i'm going to do is i need the index you know so what i'm going to do is v on click equal to v dot on click you know equal to play song and we are going to pass the index long index but we don't have the index so how how we're going to do it so for that what i'm going to do is v4 supports the index so i'm just going to extract that from here song index and i'm just going to pass it over there and yeah i think it should work let's see cheap thrills you can see cheap thrills great you'll go back lean on you can see the lean on great and you can even see the artwork right and i click on counting stars so it says context adam heart and stuff and yeah that seems good you know that's working perfectly on the first try so that is great um now what we have to do is we have to actually make it play right because it's not playing right now okay the other thing we have to do is when we click on next and previous it should switch the song so let's you know implement that logic as well so on next time previously i'm going to invent a you know event called next time previous so let's just go here i next uh i have this bar here so next and it will emit next and this will emit previous and we need both this ambit events here next and pvs right now let's write listeners for them so uh at next will be will play the previous so play previous not previous man it will be next right next and then at previous it will be play play previous previous all right um then in the methods we are going to define both of these so basically what we are going to do is when there is play next we are going to do this documents or index plus equal to one so basically we increase the index by one right and we don't need a this i guess because you know it's already visible if then the previous one x has been clicked same goes for here and same here i'm just going to do a minus one and not the index it will be one right so uh and i'm just going to remove both of these we don't need them okay but duplicate play song play song where is okay play previous it should be played previous right so it will be play previous okay so now let's see if that works so i go to cheap trails i click on next nothing happens because i'm not registering the on click events right that is the issue that is very retaining i always forget about this so click equal to it should say next and then previous uh click should uh be on click not v on click should be previous right okay now let's see if i click on next it goes to lean on if i click on next it goes to counting starts great if i go to previous it go to lean on if i go to cheap like previous then it goes to shifter but there isn't one issue if i go one more back then it's going to throw an error in the console so but it will not go like you know forward because there is no song before cheap this because it's the zeroth element right and same when we you know hit the you know row here for example lean on click on next it will go to content stuff but if i click on next again then it will not change so what i want to do is i want them to like uh you know rotate again so for example if i click on next it should go back again to you know to chip thrills basically right for that i'm going to put the logic in here songless.view so for example in previous we're going to say if this dot current song index not equal to zero so if it's not zero then do a minus one but if it's just zero then set the this dot current song index equal to this dot list dot length minus one so for example what i'm going to do is if there are like three elements then uh the length will return three then y minus one then i get to the second element so zero one two two is is like the last element you know so we if we are at the first element and we click previous then it should go to the you know last element basically so let's see if that works reload the application i i really like the unsplash and splash api because it gives me random images you know you know again and again so that's really cool you know to use in demo applications as you can see now it has new images so click on lean on i click on previous then again i click on previous then go to counting spheres lean on and then it will just keep going right but still you know plain x doesn't work as we want it to so for play next we're going to put a condition damn what i did if if this current song index is smaller than this dot list dot length minus one till then you can do a plus one else you'll set the current index to zero so one sec what happened oh this is fine i i i think it's just being slow i guess yeah so if this dot current song index just listen n minus one means for example if we are uh if you have three elements and we are at the second index three minus will be two if it's smaller than two then you know you can plus one but if it's equal to two or greater than two then you have to you know go to the first song which is the current song index right so [Music] uh let's see if that works we reload the app you know our images basically load right and i go to cheap trails i click on next ah spelling is wrong so i go here click on next lean on counting space doing plus equal to here it should be normal zero okay so let's see if that works now now go to lean on click on next click on next yeah you just keep going and if i click previous it keeps going now uh yeah this work this works cool i i can go back i can go counting sphere i can go back i can go cheap thrills yeah this worked great so now the uh you know the last bit is to actually make the player work by playing sound so let's do that for that in the song player you know um we're going to you know have a audio player so let's do that audio so audio player it will bind the source basically so source will be song dot song src all right and we'll preload it so you know the song will preload and we'll also auto play it so as soon as the component loads the you know the track will start right and we also need a ref you know the reason we need a ref because we want to programmatically control play and pause so for that we need the ref so i'm just going to say audio player here and i'm going to use that ref right so now the other thing that we want to do is we want to make it play or pause when the you know button basically when we click on the play or pause button but first let's see if this works on uh if this even works or not so let's click on cheap thrills [Music] right i think you are able to see uh i able to hear my you know system sound if i click on contact [Music] all right so this works that's great but still if we click on play it will not work but if we click on next then it will change the form [Music] you know the next and the previous works but the play and pause doesn't work so let's you know define a play and pause for that i'm going to define two functions uh here to new method uh or i can just do one method which is like toggle play and i can just say if so the other thing that i have to keep track of is if the song is playing or not so it will be if this dot or not this i have to like define a data here data return not like this so data return is playing by default it will be true because when the component loads by default the song is you know playing so it's playing and i'm going to say if this dot is playing and you click on the button what happened all right i have to put a comma so if google play if this dot is playing like the song is playing then you have to pause the song so this dot refs dot audio player dot play not play pause because it's already playing right or else you can play it and you have to change you have to toggle the playing state so if it's play if it's playing then you have to pause it if it's paused then you have to play it so is playing equal to not this dot is playing basically right so i think this works good again i think i'm forgetting to add the click event so i'm going to add the click event here we on click toggle play so let's see if that works i go here reload the page right and let's click on chip thrills it's playing and it's pause now click again not working yeah because this l is in capital it should be in so click on pause play pause play pause i go next part play pause right so this works but you can see the text is not changing the play pause so for that i'm just going to put conditional text here so if is playing in that case show pause else do play right let's see if that works so i'm going to go back reload the application and i'll go here let's play pause click on it it says play pause play right so yeah i mean guys that's pretty much it right so this works great so if you can if you're going to give here reload the application you already have the list of your song you can click any of the you know images not the song and then you can just click on next so yeah guys this was uh a music app using vue.js and tailwind today's stream got a little bit you know stretched out but yeah i'm in this you know the output of that is good i'll put everything in the description uh what i have used and what uh you know also the rapport to this um code and yeah till the next saturday have fun

Channel: Recraft Relic

Views: 797

Keywords:

Id: BXyHeuvBttc

Length: 55min 35sec (3335 seconds)

Published: Sat Jul 03 2021