Procasti..nator: Chrome Extension Part 6

JavaScript Chrome Extensions
Transcript

English (Auto-generated)

Now let's go ahead and do some work to play the alarm when the user is an idol estate. And we'll be we'll be using an if else statements inside of this function. So we're working out here inside of this callback function from lines 13 to 17. And let me actually go ahead and comment at some comments here. So end of a state uh changed and then we'll see end of callback function. Okay? So let line number 14, B as is and here we'll say well, read structure and F L S block. So end of F and then else as well, so end off and of else. Okay, So if the state Is strictly equal to idle, so the user is procrastinating, they haven't done anything for 15 seconds or more, then we want to assign this variable that we declared up here, which is music interval. So we want to assign the variable music interval to be equal to the set interval method. And the set interval method is going to be calling a function called play music, which is going to be playing a sound at intervals of 1000 milliseconds or one second. So let's go ahead and work on that. And this is going to B frank. Sorry? So we'll call the play music function and we're going to be calling the play music function at intervals of 1000 milliseconds or one second. Okay, Now, if the state is not idle, which means that the user is active, then we want to stop the music interval a sound and we're actually out here inside of the else block, we're going to be using the clear interval method which is going to take music interval as as an argument. So this will clear the music interval for us. Now, before we move on, let's go ahead and work on the play music function, which we've called up here inside of the set interval method. So let's declare this function and function. Play music. And let me just go ahead and comment this out as well. So end of play music and out here, remember we already have a reference to the dom audio element and this is referenced by the variable music. And what we're going to be doing is we're going to be setting the source of the audio element. So music dot source to be equal to this audio file in our project folder. And this audio file is called a surprise sound effect. Okay. With a dash. So surprise dash sound dash effect and it's an MP three file. Okay, So once that done, uh inside of this function, we want to play the sound. And for this we will be using the play method to play the audio source of this audio element, which is referenced by variable music. Okay, so let's go ahead and control s to save this and head back to Chrome. So let me go ahead and remove the previous version of our extension and then upload the new version. And lets you can even pin this and once you pin it, you'll see this P icon and basically uh it will bring up the extension for you. So I'm not going to do anything, I'll just wait 15 seconds now. So there you go. So what happened was that if we're idle for 15 seconds the alarm sound goes off and when we move to active state, the music stops. So let's go ahead and try this out again. So at 15 seconds if we're not doing anything, the alarm should go off and the state should say idol and there you go. So once I do something on the web page, we've moved into active state and the alarm sound goes off. So let's go ahead and work on the start button timer next.
76 Views 1 Likes 0 Comments

Let's play the alarm sound when the user is in idle state

Comment
Leave a comment (supports markdown format)