I Made A Song Recorder With JavaScript

it's time for another back-end video and in this one we're gonna take a look at the piano app I made a few months back and add in recording capability so we can save songs that we create to a database and then share them with other people let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so that sounds interesting make sure you subscribe to the channel for more videos just like this one now to get started I have the original code from the piano video I did a few months back open up in Visual Studio code and if you haven't seen that video you can get the code down in the description below from github or you can watch the video which I'll link up in the cards in the description down below but anyway you should have this code available whether through github or through that video and on the right hand side I have this code open and as you can see we have a piano we can play with our keyboard or we can actually play it by clicking but also I have open over here the final version of what we're gonna be building it's the same piano same buttons everything works but now we have a record button so we can click record play some notes and when we finish clicking record it'll play those notes back to us we can play it as many times as we want and we can also save this which is actually going to give us a special link as you can see up here which is going to be the link for our song we can share that with people and it's always going to open up this piano where the play button is going to play that song and of course we can go back and record a new song if we want to so let's get started by transferring what we currently have over to a express server so that we can actually do some fancy database stuff on the back end so to do that we need to just open up the command line here and what we need to do is we need to type in NPM and it and it will just put - why this is going to give us all the default values that'll create this package.json file you see here and then next we need to install our dependencies for Express so we'll say npm i we're going to need Express we're also going to need ejs to handle all of our views for rendering our application and then we're gonna need Mongoose which is going to allow us to actually access the database in the background so we can save our songs to a database and have them just forever also we're gonna need a single dead dependency this is just going to be NPM I - - save dev and what we're gonna want is a dependency called node Mun which is going to allow us to automatically refresh our site every single time that we make changes to our application and as soon as that's done being loaded we're gonna open up our package JSON you can see all of our dependencies we install they're here and we also want to add in a single script we're just gonna call this dev start and we want to run a node Hmong server oops server dot Jas make sure this is a period here and what this is gonna do is it's going to run our site using node Mun every single time that we refresh our application it'll use node Hmong to actually show those changes to us so if we change our files it'll automatically refresh for us so now let's save that and get started organizing our files so that they're in the different places we need so we're gonna create a new folder this first folder is going to be for our actual public files so we're gonna say public and this is where things like our style sheets are gonna go so let Church drag our CSS up in there our JavaScript is gonna go in there and also all of our notes here this is all of our different notes for the piano all of these also need to be in our public folder as you can see here next we're gonna move this index.html into a views folder so let's create a new folder called views and we'll drag index.html in there and we need to rename this to DJ s that way we can actually work with this using node and Express so now we have an EJ s file here and if we create a new file outside here called server jeaious this is where all of our server code for setting up express is going to go so let's first require those libraries we created so we have Express is going to be required Express and we need to get an app variable from that so we'll say app equals whoops Express we should run that like a function and then we can say app dot listen oops listen and we need to pass it in the port we want to listen to in our case we'll just use port 5,000 for now and also what we want to do is make sure that we have a single route setup which is going to be for our index page so we're just going to say first slash which is gonna be our index route we're going to have a request and every sponsor Abel and inside of here we just want to respond with our index so we'll say render and we want to render that index that ejs file just like this now if we save and we run npm run dev start we head there you should see it says that it started up our server so if we go to localhost port 5000 so localhost port 5000 you'll see that we have no default view engine was specified let me just view that in no default engine was specified so what we need to do is say app dot is set and we want to set the view engine and this is where that library ejs comes in we're just gonna set it to ejs now if we save and it's refreshed over here you see that this is loading up but we don't have actually anything showing up at our page and the reason for this is it actually is loading our indexed ejs file but all of our style sheets here which actually make our page look like this makes all of our key show up makes our background show up and all of our JavaScript which makes things work are not actually being loaded in if we just inspect this page here you see that we have a bunch of errors in our console essentially saying it cannot find these resources for all of our different notes and all of our different public files so we need to tell Express where all of these different public files are and to do that we can just say app dot use oops use we want to type in Express that's static and in here we want to pass it the path to our static folder which in our case we called that folder public this is just where all of our assets such as style sheets and JavaScript are going to live now if we save and reload you see that our piano is showing up and if we type our keys we can actually play our piano so our application is essentially working exactly the same as it did before but now we have an entire server back-end we can use to hook up to a database and do a bunch of other fun things now before we get started and doing all of this fun backend stuff with the database and saving our songs we actually need to implement the ability to record and save songs into the front-end first so let's open up some of our front-end files we have our index tjs here we're also going to need our script j s and our style sheet statut SCS I'll just scroll down to the bottom here and the first thing we need to do is just obviously add a button which will allow us to start Gordon so let's create a container we're just gonna call buttons which is what we're gonna put all of the different buttons as if you remember right we had a bunch of different buttons we could click we had like record plays save they're all gonna live in this container but first we're gonna create a button which is going to have the class of record button just like that let's also give it the class of BTN so we can style all of our buttons almost exactly the same and then we'll just put the text record inside of here and if we save you can see a record button is showing up right there obviously this is not where we want this button to be so let's jump into our style sheets here and the first thing we want to do is go all the way up to our body if we change our Flex direction to column it'll allow us to stack everything on top of each other like that which is what we want and now we can actually select that container which is called buttons and we can select each individual button by saying button and then we also have our record button which we can select as well so the first thing I want to select is this buttons class this we want to add a little bit of margin on the bottom so we'll say margin bottom is to REM gives us some space between our button and our piano and also I'm gonna change this to display of Flex just so that when we have more than one button in here they're all going to show up on the same line now next inside of our button class itself let's work on styling our button we're gonna add some padding so we'll say 0.5 REM and 1 REM we're also going to remove our border from this so we'll say border none' whoops and we're gonna go in here with the background and instead of setting a specific background color I'm actually going to use CSS variables combined with HSL in order to set a specific background color based on our variables so we're gonna have this specific variable for the hue of our color we're also going to have a specific variable for the saturation of our button and then lastly we're just gonna use 50% lightness for all of our buttons so let's come in here and we're gonna create some variables so we have our hue variable oops hue variable and we're also going to have our saturation variable and we'll just set our saturation to 100% by default and we'll set our hue to 100 that will give us a greenish color as you can see over here because by default most of our buttons are going to be this green color if you remember from this their example over here also let's bump up the font size so this is easier for you to read so we're going to say font size is going to be 2 REM and we'll also add a little bit of margin on the left hand side of our button we'll just say 1 our VM and this margin on the left the reason we're adding this is so that when we have multiple buttons in our container they actually have some space out from each other but we don't want our first button to have this so we're gonna say the first child that is a button we want the margin on the left to be 0 just so the first one isn't moved over by that margin and the margin only shows up on all the buttons after so that they have that spacing but we don't want the extra spacing at the beginning now the last thing we're gonna do is we're just gonna inherit our color oops inherit our color down this is because some of our buttons are actually going to be links and we want to make sure our link color is inherited and also we're gonna remove text decoration because if you remember right anchor tags which are links they actually have that underlined we don't want that and then lastly we'll use that pointer cursor for our button as you can see here but our record button is going to be slightly different than the rest of our buttons because we want this to actually be this reddish color when we are recording and this gray color won't or not as you can see we have gray and when we click it turns to this red color and when we click again that red colored goes away so for our record button what we want to do is we want to set our hue here to be 0 this will give us that red color and we also want to set our saturation to 0% which is going to give us a gray color but when our record button has a class of active which means that we are actively recording I want to change our saturation oops saturation and I want this to be 100% so now if we go back into our index tjs and we add a class oops of active onto this we're gonna get that red color for a record which isn't exactly what we want now all we need to do is just add in some nice hover effects on our button so when we hover it it's easy to tell that it's clickable so inside of our Styles let's select our button on the hover State and we'll also do this for our focus as well and all I want to do is select our background whoops color we already know what our hue and everything is going to be so we'll use the exact same hue from our variable and we're also going to use the same saturation so we'll say saturation here and we just want to drop down our lightness to about 30% that's about 20% darker and now when we hover the button you see it's going to just darken that color for us this isn't the most visually pleasing CSS Styles but the point of this video is more on the back end of things how we do the saving so you are more than welcome to make this look better but for now it's just gonna stay this ugly great color so now with that out of the way those are the basic styles we're gonna need for our different buttons so let's move on to the JavaScript inside of our front-end to work on how we can actually record these songs so the first thing we're gonna need is to actually get our button so we're gonna say record button whoops make sure that the capital B just so it's easier to read we're gonna set this to document dot query selector and we want to get the button that has the class of dot record button and now what we have that record button we can actually set up some event listeners on it so let's just scroll down here a little ways we'll say record a button dot add event listener and we want to add an event listener for when we click on this button and all we want to do when we click on this button is to actually toggle our recording so we'll call a function which is toggle recording and instead of actually creating a function which calls a function we can just pass our toggle recording function here to our add event listener and that's going to do the exact same thing as what we just typed out it's just easier to read easier to write so let's create that function it's gonna be toggle recording and inside this function we just need to add that active class or remove it based on if we are not recording so in order to do that we just want to say record button dot class list this is going to give us all of the classes and we just want to toggle a class which in our case is active so this now when we click on our button is going to make it turn red and we click it again it's going to go down to this gray color that's exactly what we want now also that we have our toggle recordings set up we want to have some more code in order to start our recording and to stop our recording so let's say if we are recording so we'll create a function call is recording and we'll define that in a little bit so if we are recording then we want to start our recording so we'll just say start recording and again this is going to be a function that will work rate else if we're not recording then we want to stop our recording and we're again going to make this a function just so our code is easier to read so the first function we want to create is our function for is recording and inside of this function we want to check our recording button and if our recording button exists and it has a class of active will return true so we'll say return our recording woops our record button is not equal to null so that means that we have a record button and oops and if our record button that class list that contains active so if our record button has the class active and our recording button exists this is going to be true so is recording will be true otherwise if those conditions aren't meant it'll be false and we'll call stop recording so now we can create our functions first start and stop recording we'll do the start one first and in this function we're gonna need to set up some variables so that we know how to record our song and now instead of recording the actual raw audio of our song which is going to be long lengthy and take up a lot of server space we're actually gonna use a little bit of a trick to record just the time that the note is played as well as what note the person clicks on so every time that someone plays a note we're gonna mark the time that this note is played as well as what note was played and from that information we can recreate the entire song so in order to get the time that the note is played we want to use a variable which is just going to be the start time so we're gonna take a start time which is when we click record that's going to be our current time and then when they click a key it's going to give us a new time and if we subtract the time from when they clicked on a key to the time that we started recording that'll give us an offset for how long from the beginning of the song this note was pressed so we're gonna have a variable which is called recording start time we're gonna set that to date dot now essentially this is the current time and we want this to be a global variable so we're going to define this all the way up here we're gonna say let recording start time is going to just be here it's just gonna be defined as nothing so we don't actually need to give it a default you and then also we're gonna need another variable this is going to be for our song notes and this is just going to be an empty array and again this is a global variable so let's just scroll all the way up here we will create a variable called song notes and we'll just declare this again as nothing so now we have the start time and this is going to be when we start at recording and we have the array of all of our different notes that we're going to fill in whenever we actually click on a key to play a note so now in our stop recording we're gonna have our function which is called stop recording in here we will obviously want to just stop our recording and we want to play back that song to the user so we're gonna call a function here which is play song and for now this function is just going to print out our current song so we'll say play song and inside of here we're gonna console.log our song notes just so we can see what this looks like as we play our song and now whenever we're in this play note function we want to have a check us a if is recording so if we're in the current process of recording then we want to record our note so we're gonna call a function called record note and we actually need to pass it the note we're plane luckily this key data set note is going to give us the exact note that we're playing so we'll pass that into this function and now we can create the function record note and it's going to take in a note and all we need to do is take our song notes array we're gonna push in a new object and this object is going to have a note which we're just gonna denote as our key that we're playing which is going to be from this note we passed in and it's also going to have a start time which is essentially when we actually clicked on the key and remember I said we want to get the current time which is as we know date that now and we want to subtract that from when we started our recording so we'll say recording start time just like that and now if we save we should hopefully be able to record a song and when we're done it's going to print it out to us so if we click this record button click some keys like this and then stop our recording if we inspect our page go to our console we get an array here as you can see with our keys CD CD which is what we played as well as the start time in milliseconds so after 778 milliseconds I played the first note and then about a second I played the second note so a second from when I click to record to the second note a second and a half after I clicked to record I played the third note and then almost two seconds later after the record button I played the fourth note so now we have all of our notes as well as the time between when we played each of those notes so now we can actually play those notes back to us so in order to do that we need to create a function which is going to allow us to play the song right now we're just printing out our notes but we want to actually take those notes and play them back to us and luckily we have this convenient play note function where if we pass it a note it'll play it for us so we just need to offset based on the time of each of our notes and call this function so let's come in here and we're just gonna loop through all of our song notes but first we want to check if we actually have any song notes so we can say if our song notes that length is equal to zero we just want to return essentially if we don't have any songs just return out and don't actually play the song but if we do have songs inside of here we want to loop through all of our different song notes so we'll just say for each and we're gonna call this our note and for each one of our notes we want to use set timeout which is going to allow us to wait a certain amount of time in milliseconds and then call a function so let's define our function and then the second parameter here is how long we want to wait and this is just going to be note that start time if you remember that's what we actually saved inside of our song notes so now we're just setting a timeout to play this function here we're gonna call this function after we wait this amount of time and in this function we want to call play note and we want to pass it our note but unfortunately this play note function actually takes a key and not a note so we need to get the individual key which in our case up here is an element on our page up here we need to be able to convert a note to a key so let's actually set up a new variable which is going to be our key map we're gonna call it key map and this is going to be a conversion from our notes all the way to our keys here so what we want to do is we want to take our keys and loop over them so we'll say keys and we want to actually reduce so this this allows us to do is actually taking this array and do some operations on it and return a new object in our case we want to turn an object which is mapping our notes to our keys so what this is going to take is a parameter which is first our map and then the second parameter which is each one of our individual keys and if you're not super familiar with this reduce function I have a video covering it which I'll link in the cards in the description down below and the second parameter to reduce is our starting point and we want to start off with an empty map essentially an empty object and all we want to do is for each one of our keys we want to map our key dot data set dot note this is the individual note far key I'm going to map that to our key and then we just return oops return our map so now this key map variable is going to be an object that looks something like this we're gonna have a key which in our case let's say is our note of C and we're gonna map that note of C to an individual key so I maybe it'll be the first key in our array and then we're gonna have another element which is going to be on another note which is going to be maybe key of one so now we can actually just call something like key map with C and this is going to give us that key for that note so now if we scroll all the way down here in our place on function we can use the key of our note and actually pass that to this key map so we can say key map of note that key which if we remember is either a letter C D or whatever and this will give us the individual key for that note that we pressed so now if we set up everything properly after we click this record button play a song and click record again it should play that song back to us so let's just come over here click record and you'll notice this is actually not working so we must have some form of error if we go to our console you see we get an uncaught type error keys dot reduce is not a function let's scroll all the way up here and the reason for that is document query selector all doesn't actually return an array it returns this array like object so we can't call reduce what we need to do is actually just D structure this will just spread out our keys into a new array and essentially we're converting this keys array which is not really an array into a proper JavaScript array which allows us to use reduce so now if we on record you can see we can record some notes and when we unclick record you see it's gonna play those notes back to us so that we can see what we've actually recorded and that's pretty much all of the JavaScript we're gonna need to work on right now in order to get working on our back-end but we do need to add in buttons that are going to allow us to play the song as well as allow us to save this song so let's add those buttons into our index tjs we'll just copy this record button down we're gonna have a play button and we're also going to have a Save button this one will just say play and this one is going to say save so if we save that you can see we have our play and our Save button here and of course by default we want these buttons to not show up because we don't have a song to play when we first load our page so inside of our Styles let's select our play button and we're gonna select our Save button and by default we're gonna set the display to none and we're also going to select the play button but when we give it a class of show we want to show it and we're gonna do the same thing with our Save button so we'll say save button that show and in here we're just going to change the display to block so now as you can see the buttons do not show up but if we add a class of show for example to our play button you can see it shows up so now in our JavaScript whenever we're done recording so whenever we stop recording we want to actually show these buttons so we're gonna say whoops first we probably want to make sure we have these buttons selected so we're gonna have our play button equal to document dot query selector and we want to select whoops that class of play button let's just copy this down same exact thing but for our Save button now in our stop recording we can say play button class list dot add and we want to add the show class and with the exact same thing for a Save button but when we start recording we want to make sure we hide those buttons so we're gonna just instead remove the class show from both our play and our Save button so now if we click record record something you can see our buttons pop up and if we click record again you can see the buttons disappear and then show back up when we click record so now all we have left to do is hook up our play button so actually plays our song again it'll just call play song and also our save button which is going to be where we integrate the backend to actually save these songs to our database so let's just hook up some event listeners scroll all the way up at the top we're gonna do our save button dot add event listener and we want to of course add this on a click and we want to call a button called save song this is going to be a function will create later and we're also gonna do our play button add event listener and we want to call this on click and we want to call a function called play song which we've already created so now if we create our save song function which put it all the way down here function save song we're gonna implement this in just a little bit but if we save click record play our song you can see it'll play back to us and when we click the play button you can see it'll also play back to us so we know that this is working so now all we have left is this save song function and before we implement this on the front-end we actually need to implement this on the backend so we can actually call one of our endpoints so let's create an app dot post and this app dot post is going to be to a endpoint called songs and this is where we're gonna post for our new songs and it's gonna take a request and a response and inside of this post we're gonna post something to the body which is going to be our request body and this is actually gonna be called song notes so essentially that variable we saved here of our song notes we're just gonna push that up to our server exactly as it is from our front-end and in order to access our body like this since we're gonna be passing it in JSON we need to say app dot use Express JSON and this is just saying that we are using JSON inside of our application so we can access it from our request dot body so now that we have these song notes on the server how exactly are we gonna save them to our database well to do that we need to hook up our database so let's come in here we're gonna use that Mongoose library which we installed at the beginning of the video and we're gonna hook this mongoose library up to a local database and if you don't already have MongoDB installed on your computer I have a video telling you how to do it up in the cards and in the description down below so make sure you check that but once you have that set up you can call Mongoose dot connect and we just want to pass it a URL to a local database you could also use a database that hosted in the cloud if you wanted but for our example we're just gonna use a local MongoDB database which is just going to have a URL like this and then it's gonna be localhost / and we just want to pass in the name of our database we're just gonna call it song recorder please this is just going to record songs for us and with this single line right here we're now connected to our database but we're gonna run into some errors if we save this you see we get deprecation warnings we need to pass in use new URL parser true so let's pass that in as an option right here and we're also saying use a unified topology set to true as well and now with both of those passed in when we save you can see we're no longer getting those errors being printed out to the console so now we're properly connected to our database the next thing to do is to set up a new folder here which we're just gonna call models and in here we're gonna create a new file which is just seongjae s this is where we're gonna store all of our song information and is our database model so let's first require mongoose so we'll say Mongoose equals require Mongoose and with Mongoose we can actually set up a schema so we can say Mongoose schema and we want to create a new schema and this first schema is going to be for our song so we'll say Const song schema is going to be equal to this new schema here and inside of the schema all we need to have is a single array of all our notes so reaching outside notes and this is going to be equal to an array but in order to define what this actual array is set to we want to create the new schema we're just gonna call this our note schema and now we can use Mongoose to create that note schema so we can say Const note schema is equal to new Mongoose schema and in here we can define what each one of our individual notes look like if you remember we have a key which in our case is just a string so we can set the type to string and required to true because each individual note is going to have a key and here we're also going to have a start time so we'll say start tying and this is going to have a type which is a number because you remember it's just the number of milliseconds and we're also going to have this required of true so now we have our individual note schema and our salon schema which is composed of an array of notes and we can actually just module export this out and we can create this and link it to our database by using Mongoose dot model and all we do is pass the name of our collection which in our case we're just gonna call this songs and then we can pass it our schema which in our case is our song schema so now if we save we have this model which we can use to create a new song so inside of our server we can import that which is just song which is equal to required dot slash models so so allow us to access our models and we can just say song J s this is a path to our individual song and make sure we spell this as required so now when we save refresh this you can see everything's working as it before so now down here we can access song and we can create a new one by just saying new song pass it in here and we want our notes to be equal to our request body dot song notes this is just an array of our notes so now we have a song which is equal to that variable that we just created here of a new song and in order to save this song we could just call song that save and this is actually an asynchronous function so let's make sure this is an async function so that we can await our song dot save and then all we want to do is just return the result so we can say res dot JSON of our song this is so that we can actually get the idea of our song so we can link to it later but for now all we're doing is just returning the song to the user and saving it to our database at this slash songs but since we know that we're going to be getting our ID back let's create a new route that will allow us to access a song by ID so we'll say app get this is gonna be at slash songs slash ID so colon ID this is just a dynamic variable we pass to our route and this again we're gonna make an async function with the request and response just like that and inside of here we want to get our song based on our ID and this in request parameters ID we pass in our URL here so what we can do is we can create a variable called song and then inside of a try-catch what we want to do is actually try to get that song so we'll try to try catch which is going to have an error here and inside the try portion we can say song dot find by ID and we can pass it in that request dot params dot ID from down here just like that so this is going to access our database and try to get a song and since it's asynchronous we need to await that and we can set our song variable equal to what we get from this but if this for some reason fails to find a song we can't actually get a song we want to just set our song equal to undefined here and then what we can do is actually render out our index page so we can say res dot render our index what we're gonna pass it in our song just like that so now we're passing our current song down to our index page like this so now with all of that setup we pretty much have our entire server done so let's just save this and the last thing we need to do is in our index TGS we need to import the library which we're going to use to call our server and I just have copied this over from CD nsj our libraries called Axios if you just search for Axios you'll be able to find this link just Axios CDN and we just want to make sure we defer the loading of this Axios library this will just make it easy for us to actually query on the back end in our server j s from our script J's and now with that setup we can use this Axios variable we can call Axios post which will post to a specific URL which in our case we know is going to be songs so we can just say here slash songs which is that same route that we have here inside of our server and then we just want to pass it the data we're passing up which we know is going to have the key of song notes and our local variable is called song notes and this is a a synchronous function it's going to return a promise so we'll just say dot then and inside of this dot then we're going to have a response and this response is going to have all of our data inside of it so if we say res data this is going to be our song and if we want the ID we just need to use underscore ID and and it will give us the idea of our song that we just created so we can say console dot log that rez data and we'll just actually log out the whole data not just the ID so now if we record a song click on the keys click record and then we click this save function here and we inspect our console you can see that we're getting printed out an object which has the underscore ID which is the new ID we created as well as the notes that we just created inside of our database so now we have all of this saved to our database we have the individual ID of our song and we have a route in our server which takes the idea of a song and will give us that song inside of our index so now let's create a new button and this button is going to be for viewing this song and we can do that in our index that ejs so right down here we can create a button but in our case we're gonna use a link because links are used for them in game to different pages and we want this link to have an href which is going to go to our new song for now we'll just leave it blank because we're going to actually define this inside of our JavaScript so we'll just leave this HRF here as just a blank href and then we're also gonna treat this just like our buttons so we're gonna give it a plat class here a button in a class of song leaked and it's gonna save you song and if we save you can see that view song button has showed up right here but it's actually a link instead of a button now in order to style this properly we want to add some margin on the bottom and that margin is gonna be the same margin that we used up here so we can just say here we want to also select that song link that gives us that extra margin that we want and of course by default we want this to be hidden so we'll just come up here and just like our other buttons we want song link to be display:none and we only wanted to show up when we give it the class of show so we'll say song link dot show let me just format that there we go so now it's hidden by default and the only time we want this to show up is whenever we're done saving a song so let's go all the way up here we have our button selectors and we want to select our song link button this will say song link button is going to be song whoops link button just like that so now we actually have a selector for a song link button and actually it doesn't even have button at the end so let's make sure to remove that and remove this here just so our selector is correct so we have our song link we scroll all the way down here we can take our song link take our class list and we can add in that show class list and we can also set the href so we can say song link dot href and we can set that href here equal to slash songs since we know it's gonna be from slash lungs and then we want our ID which in our case is res data underscore ID and we don't actually need to log out that anymore so now we're taking our song link showing it and setting the href to whatever song we just created so now if we save click on record player song and we Unruh court as soon as we click Save you can see our view song button has showed up and when we click this it's gonna bring us to a new URL of songs and it has the ID at the end and that's exactly what we want but you'll notice immediately none of our style sheets or JavaScript are being persisted so in our index TGS let's make sure at the beginning of our scripts we have a slash just like this same thing with our styles that'll make those show up in order to make our notes work we need to do the same thing we just need to put this slash symbol at the very beginning of all of our lines here so let's just go down to all of our lines and add that almost done there and this is just so we can actually play over notes no matter what page were on and now everything should be working we can play songs just like normal but instead of having this record button all we want to do is actually have our play button and we also want to take the song that we're getting from our server here and use that inside of our JavaScript so the first thing we'll work on is using that song in our JavaScript we'll create a new script tag here and inside this script tag we're going to just set a variable for our current song so we'll say current song is going to be equal to and in order to actually parse out our JSON as actual JSON we can use this - symbol right here and anything inside of these brackets is going to just be returned as normal JavaScript or normal HTML so what we can do is we can say json stringify so this is going to convert our JSON to a string and then this - is going to convert that string back to normal JSON so we can get our song which is just locals dot song this is the song from our server that we passed in right here so we're getting that song and we're converting it to a JSON object here and saving it to our current song variable inside of our JavaScript and if we save this go into our script and just anywhere at the very top here we just print out console that log current song and I come over here and inspect you should see in our console we have a new object and this object has our notes and as you can see we have each one of our individual notes with our key and our start time saved in that current song variable so now with that information we can actually set our song notes to be better so we can say current song and current song dot notes and this is just some fancy notation that's saying if we have a current song then we want to get our current song dot notes and save it to our song notes it's essentially the same thing as doing this syntax but it's a little bit easier to write out and a little bit more concise so we're just gonna go with this and syntax instead so now our current song notes are saved into our song notes so the only thing left for us to do is just to make sure that by default we're hiding this record button and showing our other buttons that we want for example our play song button so in our index tjs we can come in to our buttons here and the first thing we want to do is just have a little if statement that says if our locals dot song so essentially if we have a current song what we want to do is not actually show our record button so we'll just indent this in here and we'll say and and what we want to do whoops not and I'm sorry that's just being closing bracket so if we do not have a song so if locals dot song equals null then we show our record button otherwise what we want to do if this vocals dot song is not equal to null we want to have a button which will take us back to the actual page for recording a song so we can just create here an a tag and this a tag is just going to bring us back to our index where we can normally record songs we're going to give it a class oops a class of button we can say record new song this will just bring us back to our original page for recording a new song and as you can see if we click that button it brings us back to our normal localhost we can record a song also we want this play song to actually show up if we do have a song so inside of this class we can say that we want to have a simple if statement in here we want to say if local dot song is not equal to null then we want to return a class of show otherwise if it is we just want to return an empty string and then we make sure that we close that off here and this may be a little bit confusing to read it first but essentially if we have a song we want to show our play button by default otherwise we just don't show it and as you see we have an error that's just because this should be a colon instead of a question mark and now if I save you can see our record new song button and our play song button are here and if we actually click play you can see that nothing actually happens there should be playing our song so let's inspect and see what error were getting if we go to our console set uncaught type error cannot read property add eventlistener out of null and if you remember right if we go to our script at the very top here we add in an event listener for our record button but now we're no longer showing our record button so let's just add a simple if record button then we want to add the event listener so if we have a record button we add an event listener let's just do the same thing for our save button because we also want to hide this if we don't actually have a Save button so in our index tjs here we're gonna move our Save button up into this locals up here because we only want to show save if we don't have a song already recorded we don't want to allow someone to overwrite the currently existing song so let's save this save this and now when we click play you should see our song plane and there you go you saw that our song that we recorded just played back so now we have the ability here to actually play back songs that we've previously recorded we can go back we can record a new song click record and of course you can see we have an error so something else is broken let's inspect our page and it's uncocks syntax unexpected end of input and reference error current song is not defined so what's happening here is a little bit confusing but if we go to our index ejs and scroll up our json stringify of local song is returning essentially undefined because there is no song that we have defined on our index page so what this JavaScript outputs is Const current song equals and then nothing there's nothing here at all we want this to actually have a string of undefined so in order to do that we can just say or in a string we put undefined because if this string of I outputs knoll or undefined essentially if we don't have a song we want the text undefined to be set to current song which will give us this output down here now if we save you can see that error has gone away and we should be able to record a song click some keys click record it'll play back force just as before and now we can click Save and we can view our song and play it and this will play back the song that we just recorded and that's all there is to creating this dynamic audio recorder in JavaScript if you enjoyed this video make sure to check out my other backend projects linked over here and subscribe to the channel for more videos just like this one thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 14,899

Keywords: webdevsimplified, javascript, js, javascript piano, javascript music, javascript music player, javascript tutorial, js piano, js piano tutorial, js tutorial, js music player, js music, js music tutorial, javascript es6 tutorial, javascript project, javascript project tutorial, javascript fun project, javascript tutorial for beginners, javascript project for beginners, js project, js project tutorial, js for beginners, js tutorial for beginners, web development, node, node js

Id: d0-VH4MC0Rk

Length: 43min 36sec (2616 seconds)

Published: Tue Mar 10 2020