Radio Player App in React | React Tutorial

i've had a stitch for a long time i've been wanting to make a radio app where you can browse different radio stations and just listen to whatever genre of music you want at the time i've been thinking about it for a couple of months now well longer than a couple of months maybe even like four months or something like that and since i started working at my new job a couple of months ago i've been listening to a lot of radio and they finally got around to creating my own radio app so this is what it looks like when you refresh you get a bunch of different radio stations you can change genre from classical country dance disco and whatever and when you settle on your genre you can pick a radio station play it and obviously play some music if you are interested into finding out how i made this and you want to maybe build it for yourself join me and i will show you how for this project i use two different npm modules one is the react h5 audio player for implementing a custom audio player the other one is the radio browser api which is just a component that implements a radio browser api there are different radio apis but most of them are pretty finicky to set up and i didn't want to go through all that on my own so i just installed a component to do it for me so i am starting with a new react project i've removed pretty much all of the unnecessary things and i left only the app component the app css or the scss file if you want to do this with sas as well you will need to install the node sas module it's really not necessary there's not going to be a lot of complicated uh css and they've also added an image here called radio jpeg which is just going to be a placeholder image for our radio images if our api doesn't get one for us so in general the component that we are going to use for fetching the radio stations gives you a couple of different things one is the name of the radio station one is their logo and of course the resolved audio file or audio stream sometimes they don't have a logo or the logo can be fetched so in that case we are going to use this as a fallback and without further ado let's get to creating this i am going to add a new file here called radio js and this is going to be our component and we are pretty much just going to stick everything here i am going to import it we are going to put it over here i've also added a title and sort of like a subtitle or call to action message or whatever here just so we have something in there i'm going to import use state and use effect because we are going to use both of them to use the radio browser api we need to import that as well we are also going to import our audio player and its css and i'm going to import my default image that i am going to use for the fallback image let's move on to creating our jsx so this is going to have the class name of radio and we are going to have a container for our filters so this is going to be our class name filters and inside we need to put some filters the way i've set this up is i created a new property or new array called filters and i've set up genres that i found that work with this api so we need to pass in a genre or a filter or they actually call it a tag so we need to we need to pass in a proper tag and i found that all picks up everything classical country dance disco house jazz pop rap retro and rock pick up their respective genres and all these all of these work with the api now to use this we need to map through the filters so we're going to say filters dot map filter and in there we are going to say pan and inside of the span is going to be the actual filter now of course we also want to uh when we click on a filter we want to set state and let the app know hey this is the filter that we want to use these are the this is the genre that we want to use as the filter so we need to set up our use date and for our use date we're going to say uh we are going to track our stations so stations and set stations are going to equal use state and this is going to be empty and for the filters we are going to say station filter set station filter equals use state and for default we are going to say all which is going to fetch us radio stations regardless of the genre now we want to set up an on click event which is going to do which is just going to set up our state so we're going to say set station filter and it's going to be set as filter also if we have clicked on the filter we want to sort of mark it as being clicked so we are going to set a class name depending on if the active filter equals to this filter so we're going to say station filter equals filter if it does we are going to mark this as selected and if it's not equal we are just not going to do anything after this we are going to move on to setting up our stations so stations so this is going to be our container in the station's container we need to map through all of our stations which we don't even have yet so let's first set that up in order to call our api we need to set up a new function let's call it setup api it's going to be an asynchronous function which is receiving the station filter as a parameter inside of our new class we need to set up our api instance this is just some code that i've copied from the uh the npm module so radio browser api fetch dot bind to the window oops to the window and we need to uh give our radio app a name which is going to be used by the api but don't sweat over this just uh copy paste it if you like and then to actually get our stations we need to call the wait oops called the await api dot search stations and inside we pass in a couple of things so for the language i am going to put english but you can put uh whatever langley whatever you can put whatever language you want for the tag which is our filter we are going to set station filter and for the limit i am going to put 30 now when we have our function we want to set up the use effect we want to set up the use effect for our use effect we want to track our station filters so when something happens to station filter we want to call our function setup api and we want to pass in our station filter and then we want to take this data we want to set stations with the data what this does is when the station filter changes we call the use effect we call the setup api with our station filter and then we set the data into the station's property here in our state except we also need to say return stations because we fetch them and now we need to set them up now this is nothing is being shown because we need to go through them and map them out so we should now have our stations here and we are going to say stations so if we have stations we want to map them so stations map station and per each station we are going to return inside of our return statement we are going to put a div with a class name of station and a key of our index and inside we are going to set up another div with a class name of station name in there we are going to set up an image tag which is going to be used for our logo so for the class name i'm just going to put logo for our source i am going to say station dot fab icon or favicon or whatever all the stations that we get from the api have should have at least a property called favicon and it should have a url to the image for the logo for the alt property i'm going to say station logo and on error we are going to say set default source so what is on error honor means when we get into a situation where our api doesn't provide an image or it does provide an image but for some reason we can't open up the image the request returns an error uh then we can put an error here and basically tell this use the default image so what is the set default source set default source is a simple function so set default source is going to be a function which is just going to receive an event so we are going to say events dot target dot source equals default image which is our default image that we've imported here and as you can see we are already getting some results so some of some of the radio stations that we received have their own radio image some of them don't and we can see that our default image is being displayed properly which is awesome then right below our image we are going to have a we're going to have another div with a class name of name which is going to be the radio station name and that we can find in the station dot name so when i hit save we should also get the radio station names that's great and after this the only thing that we need is the actual audio player so i'm going to put this i'm going to put the audio player here so i'm just going to call the uh audio player component which we've imported and this accepts a couple of different things so for the class name we can set player for the source the source is the source of the file or the stream that is going to go into the player so for the source we say station dot url resolved which is the resolved url of the stream or the file and when i hit save it should yeah it's already here so there are some other things that we can do with this we can remove the controls that we don't need from here so we do it like this show jump controls equals false for the layout you can see different layouts on the modules page but i'm going to use stacked here layout stacked now custom progress bar section for this i'm going to pass in an empty object sorry i'm just going to pass in an empty array custom control section is going to have just two different controls so you need to pass these strings like this so main controls main controls and another one is the volume controls and the last one is auto play after source change we need to set this to false uh if you don't set this to false when you uh change when you refresh your page or when you call the api once again without refreshing the page all of the radio stations are going to autoplay all at once which is not a good experience now when i hit save this is going to shrink a bit or we are going to lose uh some of the functionalities that we had previously and as you can see it's a pretty bare bones audio player but if i click play we get some music playing which is great and this is pretty much all of the logic for our app now we just need to make this look presentable so over here i have the app scss file you can use the css regularly because there is just there are just a couple of selectors which you can change instead of nesting them you can chain them if not if you want to use the scss then uh feel free to install the npm sas module and the css is like i said nothing complex so for the app we are going to say display flex and we are going to align items to center and flex direction is going to be column for the body i am going to set up a linear gradient so with a purple color going to a bit less purple color and for the fallback i set up this the same basically the same purple color for the text color i'm going to set white uh we can maybe lower it to not be full white and i've chosen a font that i found on google fonts which is called architects daughter and it is a cursive oops it is a cursive so architects daughter it's a sort of i don't know it's a cursive font uh if you want to download it this is the url or just go to google fonts and search for uh search for architects daughter next i am going to add a bit of different styling for our h1 and h2 so each one is going to have a top margin of 1 m and font size is going to be 3 ram h2 is going to have a margin bottom of 2m just so we have a bit of separation [Music] and here we actually need to return the spam and that's why our tags were not actually showing which i've just now noticed so here are our tags okay let's get back to the css for the radio we need to set max width to 60 m and for the width i'm going to say 100 for our filters we are going to say display flex we are going to justify the content to center flex wrap is going to have a wrap and margin bottom is going to be 2m just so we have a little bit of separation for the font size we are going to set 1.2 ram and forward width also 100 for the span tag inside of the filter which is which is the actual filters we are going to say margin is 0 25 m we are going to give them a little border which is going to be one pixel solid and this is a color that they found so e 3 6 b a e which is a pink color border radius is going to be 10 pixels padding is going to be 0.25 and 0.75 m for the hover i'm going to say uh cursor is going to be pointer and for the background we are going to change the we are going to change the background to a linear gradient which is the same pink color used here and uh and an orange color so if i refresh this we should see the background changing that's great the same way we want our selected tag to also have the same effect so i'm just going to copy paste this here so when we select let me refresh this when we select something we want the background to stay put so cool and we can see that we can see that our filter switching is also working for the stations we're going to say display grid i've imagined this as being like a three column grid for the bigger screens and the two color uh two column grid for the the smaller screens you can also pull this off with flex i just wanted to try out grid a bit so grid template columns is going to be repeat 3 by 33 which just means if you if you are not familiar with grid this basically what this basically does is it uh this basically tells our grid to have this template which is repeat this many times and set the width to this so it's going to repeat three times for 33 which is 99 which is uh pretty much the whole width and for the width we are going to set 100 for the station we are going to say font size font size is going to be 1.2 m border is going to be one pixel solid and this is just going to be just a lighter a lighter purple color so 76 62 95 rgb for the margin we're going to have 0 25 m for border radius we are once again going to have 10 pixels we are going to have a padding of 1m we are also going to set the display to flex flex direction is going to be column we are aligning the items to center and we are justifying content to center so we have everything centered inside of our station containers and it looks like this because we still need to resize our images you can see you can see they are all over the place and also we are going to have a slight we're going to have a slight hover effect so on hover we are just going to say border color is going to be the the pink color that we found and after this we are continuing to our station name station name uh is the container that contains the image and the actual name so we're going to say display flex flex direction is going to be row we are going to have a margin bottom of 1 m width is going to be 100 we are going to align items to center and we are going to justify content to start now for the name of the station we are going to say width is going to be 100 and text align to the center for the image we are going to say display block width is going to be 2.5 m and height is going to be 2.5 m now this is not going to be perfect because like as you've seen the images are not of the same proportions or sizes but i felt like i need to do something to make them a bit more presentable so some of them are going to be cropped some of them are being to be a bit stretched out i feel like it's you see you can see this one is stretched out and this one um but i feel like it doesn't matter for a prototype project i feel like this is okay uh if you wanted to create something like this with like everything looking perfect you would need to have perfect images like perfect image sizes uh we don't have that here so we just need to work with what we do have uh for the border radius i'm going to say 50 so we have circles and border is going to be two pixels solid and it's also going to be the the slight purple uh the purplish color that they found we are going to have a bit of margin 0 0 25 m for our audio we are going to say width is going to be equal to 100 now to style the uh the audio container and its um inner elements we need to there are there are instructions for how to do it with using sas properties i wasn't able to do it like that what i did was i basically inspected the elements and i basically found the selectors for different things so you can see they have rh ap underscore main uh under rh ap underscore stacked whatever um i did a little bit of styling you can do it as well you can leave it like this it doesn't look too bad but i felt like i wanted to set it up a bit further so this is the these are the selectors that you are going to use for the elements uh for for setting up these elements so rhap underscore container dot player and this is going to have a background color of the purple color that they found the display is going to be flex we are going to justify the uh we're going to justify the items to center we are giving it a padding of 0 25 and 0 75 m and the border radius is going to be 10 pixels so this is basically the container this is basically the the container so we just styled the whole uh container over here the next thing is uh h a p underscore stacked dot r h a p underscore controls dash section this is going to have margin top of zero and important because i couldn't get it to work otherwise so what this does is it removes the margin from the play button so it can be centered nicely we are going to have rhap underscore controls dash section rhap underscore volume dash controls and we are going to say justify content to center which is going to center the volume controls and you can see they are centered and now if we want to change the color so i'm just going to copy paste both of the selectors here and you can go and go ahead and set them up yourself can also set this up to be a bit nicer for the mobile screens so media only screen and max width is going to be uh let's say 600 pixels which is pretty high for mobile phones but station stations is going to have grids template columns equal to repeat two times for the width of 50 which means the grid is going to be two column grid instead of a three column grid and for the image i'm just going to say display none so this way if i open this up in full screen [Music] and let's open up the responsive view now if i resize this we can see everything is resizing properly and once i get below the 600 pixels we lose the images and we get the two column grid layout instead of a one column grid layout maybe we can just go and say uh 1 and 100 and this should now be just one column layout and it can look like something like this now of course you can play around with it set up different layouts and everything but for a prototype app i think this is really cool uh a couple of different things that can be added here are for example setting up your favorite radio stations uh being able to add your own different tags uh setting up a favorite tag for example the uh setting up your favorite radio stations could be resolved with using local storage if you're not familiar with using local storage i have a video on my channel where i use local storage to set up dark mode effect in react you can check that out i also go in detail about how to actually use the local storage for different things you can use the local storage in this example to basically save an object which has a list of your own of the radio station names or urls or pretty much everything and you can just regenerate repopulate the list when you click on a separate tag let's say a favorites tag or a favorites button i think that this is a pretty nice prototype project which you can use to put in your portfolio like i said there are some features that you could add to it to expand it if you do send me a message on twitter or on instagram or here in the comments uh below this video i would really like to see your creations and what you can do with this and that is all i have prepared for you for today i hope you liked this video if you did make sure to check out my other videos subscribe if you're not subscribed already and i will see you in the next one

Channel: Aleks Popovic

Views: 2,243

Keywords: react tutorial, javascript, javascript tutorial, react, web dev, software development, react js, reactjs tutorial, reactjs for beginners, javascript tutorial for beginners, react tutorial for beginners, web development, react hooks, radio player in react, radio player tutorial, radio player javascript, radio player js, radio app tutorial

Id: dNTpGEULK_I

Length: 33min 18sec (1998 seconds)

Published: Tue Mar 09 2021