HTML5 video volume animation
Now that you know how to control volume in html5 its time to learn how to create dynamic fun animations to our volume to make our video player polished and ready for the real world.
Video Transcript
00:00All right.
00:00So I thought a fun way to wrap up the discussion about volume
00:03would be to create some sort of a fun kind of volume
00:06enhancer or up or down, or kind of creating
00:09a little bit more excitement in our volume mute button,
00:12unmute, and as our volume changes.
00:14To do that, we're going to create something completely
00:17hands-on from scratch, no components, no anything.
00:20Let's jump right into our code.
00:22And I'm going to start by creating first our animator
00:25tool.
00:26And basically, what we want to do
00:27is we want to basically animate a volume.
00:30So to do that, I'm just going to create a target volume
00:33variable, target.
00:37I'm going to set that value by default to be 0,
00:40or maybe we set the target to be the default value, which
00:43was 80%, so 0.8.
00:47Our next step would be to create maybe a function that
00:50would then step up the value of our volume,
00:53basically taking our volume slowly, slowly
00:56closer to our end goal.
00:59To do that, I'm just going to create a quick function
01:01that we'll call this volume update,
01:04volume step, volume change animation.
01:13So we're going to call this a volume change animation,
01:15mainly because our volume is going
01:18to change in an animation.
01:20So what we want to do is, first of all,
01:22we want to approach our video volume currently.
01:24And we want to compare between our video volume and the value
01:28that we want to get to.
01:30So to do that, what I want to do, first of all,
01:32is I'm going to reset this video volume by default
01:36and set it to be 0 by default. And what I want to do
01:39is I want to call our video volume change animator,
01:43just for the sake of showing this for a second.
01:46And in my console log, I just want
01:48to log in my current video volume.
01:53And I also wanted our target volume.
01:57Obviously, once our target volume and our current volume
01:59reach, then we're done with our animation.
02:02All right, so our next step before we even
02:04start an animation is just to see what our default starting
02:07position is.
02:08And we could see that our defaults are in position zero.
02:11Our goal is 0.8.
02:14So let's first do the first step
02:16that we want to take before we do anything further.
02:18So first of all, what is the first step
02:20that we want our animator to always do?
02:22We want our animator to always take a step closer to the volume
02:25that it needs to get to.
02:27So to do that, what I'm going to do
02:28is I'm going to create one if statement of if our volume is
02:31smaller than our goal.
02:37And if that is the case, what do we want to do?
02:39We want to take our video volume,
02:41and we want to step it up by a certain amount of steps.
02:44So in our case, we'll create here a constant variable.
02:48And I'm going to call this vol step size.
02:53We're going to set that to 0.01,
02:55because we want it to go up by only 1% at a time.
03:01And that's really what we want it to do if it's lower.
03:04Now, vice versa, on the other way around,
03:06we would want the volume to go down by one.
03:08So I'm going to do the exact same thing,
03:10only pushing the volume down by one value.
03:14Now, obviously, this isn't a full animation yet,
03:17but if we run our application now,
03:18we'll see that our volume should then automatically,
03:21if we don't have an issue.
03:24Oh, so first of all, we crossed the value
03:27that was permitted, meaning that we didn't,
03:29our if statement is not correct.
03:32So let's check this again.
03:33If our video volume is larger than our target,
03:38oh, so we wanted to do the exact opposite.
03:40If it's larger, we want to make it smaller.
03:42If it's smaller, we want to make it larger.
03:45If we go back again into our browser, click on refresh,
03:49we won't have any errors now,
03:50which is obviously a good sign.
03:52We don't have any traces either
03:53because we didn't have any console changes inside.
03:57Now, the next thing that we want to do
03:59is we want to actually start our animation.
04:03So to do that, I'm going to create one more variable
04:05that is going to be my interval, or my timeout interval.
04:13So I'm going to call this an interval,
04:15and the interval is basically an ID
04:17that we use to create a new animation.
04:20Basically, I set my interval and I set a timeout.
04:25By setting a timeout, I'm basically saying,
04:27call this function again,
04:28or whatever function I want to call,
04:30and then I say, when do I want to call it?
04:32So in this scenario, we want to call it after 15 milliseconds.
04:35We could put there any value that in our case,
04:38we want to put there 50 milliseconds.
04:40What we're actually doing
04:41is we're recursively calling our volume,
04:44and we're going to call this function
04:45over and over and over.
04:46Now, obviously, by doing this, we're going to have issues,
04:49but let's first see that it's going to work
04:51at least partially.
04:52So if we start our application
04:54and I go right ahead into Safari and I click on refresh,
04:57I'm going to go ahead and click play immediately.
04:59And you'll see that our volume is going to raise
05:01and raise and raise,
05:02and continue going up all the way until it reaches 100.
05:05Only problem is whenever it gets to 100,
05:08it should generate an error.
05:10Now, unfortunately for us, because our speed is really fast,
05:13we didn't reach that amount of time.
05:15So I'm going to just go right here
05:17and I'm going to step the volume by 10% at a time
05:20to make it more drastic and easier to notice.
05:23Going to go back into my application,
05:25I'm going to click on refresh,
05:27and I'm going to click on the play button.
05:31Oh, by the way, one thing that we're not doing here
05:35that we should be doing here
05:38is also maybe let's trace out the volume
05:40that is currently there.
05:41So I'm going to console.log vid.volume.
05:46And with that, we will be able to troubleshoot
05:49and see why is it continuing working and not breaking.
05:52All right, so let's see this in action.
05:54So first of all, I'm going to click on the play button.
05:57And in the play button itself, I'm going to wait.
05:59Oh, I didn't refresh.
06:01All right, so we're going to click on refresh
06:03and you'll see that our volume is changing, changing,
06:05changing, changing,
06:06but it's getting stuck there between 80 and 70
06:08and continuously going on forever,
06:10which is obviously one of our problems.
06:13So I'm going to, first of all,
06:14I'm going to get that stuff to be bigger again
06:15because we could see that that wasn't our initial issue.
06:19But what we could do now,
06:21once we know that our issue is that basically
06:23whenever it reaches the target, it goes down by 10.
06:25Whenever it doesn't, it goes up.
06:27We just want to make sure that we don't continue
06:29if we reached our target.
06:31And one other issue that we're noticing
06:34is that when we're looking at the values
06:36that are coming out in Safari,
06:37we could see that the value isn't exactly the amount
06:40that we're thinking.
06:41So what we want to do is we want to go to that value,
06:44maybe duplicate it by 100, and then round it up.
06:48That way we only get the value that's actually current.
06:52So let's change our code to make that happen,
06:53to reflect that.
06:55So the first thing that I'm going to do
06:56is I'm going to go to my variable,
06:58I'm going to create a new variable,
06:59and I'm going to grab our video volume.
07:02I'm going to duplicate it by 100,
07:04and then I'm going to set it into an interval
07:05by calling the function parseInt.
07:10By calling it a parseInt,
07:11I'm basically turning it into an interval.
07:14And now that I know that I'm going to be working
07:16with numbers between zero and 100,
07:19I'm going to then change my target volume to be 80.
07:22This way it's easier for us to work
07:23and we don't have to have extra math that's not needed.
07:26We just want to give a name to our variable
07:28so we could say current volume.
07:30So that's our current volume.
07:32And now we could ask if our current volume
07:34is larger than our target volume,
07:38then do one thing, otherwise do the other.
07:40And we could add one extra element
07:42which will be if our value is already there.
07:45So this is going to be an if else statement.
07:47And in this one we'll ask
07:48if our current volume equals our target volume.
07:53In that case, we don't want to start a new interval, do we?
07:56We want to clear out and leave our function.
07:58So to do that, we have a couple of options.
08:01One is that we add our interval in these two elements,
08:05or we could put your return forcing ourselves
08:07out of the function by not going into
08:10and setting a new interval.
08:13Traditionally, you're not supposed to put a return
08:15in a position that is in the middle of the function
08:17because it's confusing for others.
08:19So instead of doing that, what we'll do is
08:21we'll just put our interval twice inside.
08:25Basically making sure that our interval
08:28is being called only once,
08:30but it's only called if it's one of those two options.
08:33Well, it doesn't get called if it's in the top.
08:35Now, another solution obviously would be
08:37we could create a new bigger else statement,
08:40wrap it all together,
08:41that way we don't have to put two lines of code,
08:43new lines of code and only one.
08:45And this way we don't have to put the interval in,
08:48but we only put it inside of the secondary else statement.
08:52So only if we reach and go inside
08:54of our secondary else statement,
08:56only then we would add that interval.
08:58In this case, we probably wouldn't be doing nothing.
09:01We do nothing.
09:06And that's exactly what we wanna do.
09:07So let's make sure that this actually works.
09:09We're gonna play our video one more time.
09:13So I'm gonna go into our Safari.
09:15Oopsie, Safari, that was.
09:18Gonna click on refresh and we're gonna look at it
09:20and we wanna make sure that it stops at some point.
09:22So it grows, grows, grows, grows until it gets to 80.
09:25And when it gets to 80, it gets rounded up
09:27and then it doesn't continue.
09:29So if we play our video,
09:30we should see that the volume
09:31will start going up and up and up
09:33until it reaches 80 slowly, slowly,
09:35and it would never continue beyond them.
09:39Perfect, so we got ourselves a perfect,
09:42we got ourselves a perfect animation going on.
09:44All that's left for us to do
09:46is to go inside of this animation component
09:48that we just created and add into it
09:51a basically a starter for the function
09:54and also some sort of a protection
09:56to make sure that we don't call this interval
09:58more than once.
09:59Making sure that even if someone calls
10:01a change animation twice,
10:03it wouldn't break the application.
10:05To do that, before we do anything,
10:06I'm gonna clear the timeout
10:08and I'm gonna just put that interval,
10:10which basically this interval value
10:12is the ID for the animation.
10:14And I'm basically telling it
10:15stop that animation from happening.
10:18Now that we created a clear timeout,
10:20basically, we could create now a function
10:23that would be update volume.
10:26Our update volume would accept only one parameter
10:29which would be the volume that we want it to be.
10:32Once we have the volume we want it to be,
10:34we could actually go to our target volume
10:40and we could set it to be that volume we want it to be.
10:43Once we did that,
10:44all that's left for us to do is actually call the function
10:48volume change animation.
10:49And volume change animation will automatically take over
10:53and continue until the volume will reach its destination
10:56or until someone changes the volume.
10:58All that's left for us really to do
11:00is to go into all the different elements of our volume
11:03and to check and make sure that we're using them
11:06instead of calling directly our volume.
11:08So instead of calling the volume directly,
11:10first of all, we could set the volume by default to zero
11:13because we're not playing.
11:15Maybe when we pause and play,
11:17if we go to our pause and play functionality,
11:20we could go where mute toggle.
11:23Okay, let's do the mute toggle
11:24because that would be probably even more fun.
11:27Or instead of muting, what we could have done
11:30is just taken all the volume all the way down to zero
11:33instead of muting and then taking the volume
11:35all the way back up to whatever volume it was at.
11:38So instead of muting the button, we could try doing that.
11:41So basically, we would create an internal commodity.
11:48Let's keep it simple, but we would create,
11:50let's find one of those areas where it would be easy
11:53for us to see this without too much of a hassle.
11:57So one thing is on volume change,
11:59automatically we change the volume.
12:01Instead of changing the volume automatically,
12:03let's just call update volume
12:05and we'll send the e-target value directly into there
12:09and let that animate the sound.
12:11So I'm gonna comment that out and if it works,
12:14then you could now implement it in all the other areas.
12:16The buttons, I just didn't wanna start saying
12:18that would be a little bit more complicated
12:19to take less time.
12:20So you guys could do that as your homework and girls.
12:23All right, so I'm gonna click on refresh again
12:25and we're gonna click on the play button.
12:27And now while it's playing, I'm just gonna go at some point,
12:29I'm just gonna click on zero, click on tab,
12:32and I wanna see that the volume
12:33will start animating down and it does.
12:35Now, if we wanna see it in a more drastic fashion,
12:38I wanna say a few things.
12:39So one is if we change the value here
12:41from a zero dot one to any other value,
12:44we might get to a scenario where our logic won't work.
12:48And the reason is because we might never reach a scenario
12:50where our current volume and target volume are the same.
12:54So for example, if we made a step here of maybe three,
12:57three would never get to 80
12:59because 80 doesn't divide by three.
13:01But if we had instead of that we went
13:03and we put here a value of zero dot two five,
13:05then a value of zero to five will make sure
13:07that we always get to that 80 position.
13:09So I'm gonna set it to zero dot two five
13:11and we'll run it one more time.
13:13And we're just gonna test it out by,
13:15I'm gonna play the application
13:17and I'm just gonna force it to be at zero for a second.
13:20And we'll see that the volume will go down
13:22really, really quickly and I'll force it to a hundred.
13:25And you'll see that the volume will go up immediately.
13:28So I'm gonna play this again just so we can see this.
13:29So we're at a hundred, I'm gonna tap to zero
13:32and we'll see that our volume will go down drastically
13:34all the way to the bottom.
13:36And we're gonna wait until the video plays
13:37and completes playing out.
13:39And I'm gonna click on the play, turn it into a hundred
13:43and we'll see how the volume will now step
13:44all the way up quickly back into a hundred.
13:48So there you go.
13:49You've just created a very, very sophisticated audio muter
13:54and animator and you could actually integrate this
13:57into any live application where you could create
14:00a much more smooth transition when videos,
14:02when they stop, when you click on the mute button,
14:05it doesn't immediately just stop.
14:06It just fades out quickly or fades back up.
14:09And you could tie that in with all the other features
14:12and functionalities instead of using
14:13the actual mute command.
14:15So actually we're not done.
14:16We have one more bug actually to fix.
14:17And the bug is in that volume controller animator
14:20that we created.
14:21The issue that we have is that once we change the numbers,
14:25as we said that it might happen,
14:26once we change the numbers,
14:27the values that are getting inputted into the player
14:30could be different between the different browsers.
14:32So for example, in Safari right now,
14:34when we set the value to be 0.8,
14:36it actually accepted 0.7999 and so on and so forth.
14:40Thus it never really gets into,
14:42when we look into our if statement, it never is true.
14:45It never is accurate.
14:47So what we wanna do next is instead of maybe
14:50comparing between the exact values,
14:52we wanna probably compare a range.
14:54Basically telling it if our current volume
14:57is larger than the target volume minus our step size,
15:07and we could do this even without doing the conversions.
15:11But basically target volume size,
15:12which would be the step size, all right?
15:15Now what is the next step?
15:16The step size right now is in a conversion of times,
15:20is divided by 100 already.
15:21So we wanna duplicate it by 100.
15:23So we got if it's larger than our current step and end,
15:28we wanna make sure that our current volume
15:31is also inside of the range.
15:33So not only is it bigger than one step below,
15:37it's also smaller than our one step above.
15:41Making sure that if it's inside of that range of,
15:44after the 0.7,
15:5179, 75 or whatever,
15:53whatever it grows in between those values,
15:55and we don't need to end here,
15:57then it should stop our if and stop our conditions
16:00and we do nothing.
16:01And let's just put here a nice trace out
16:03console.log, we are done.
16:08So let's run this baby one more time and see if it works.
16:13So I'm gonna run it refresh again,
16:15and let's look at the volume
16:16and see if when we reach the value, which we do,
16:19we see that we stop and we don't continue on
16:21with our animations no further.
16:23Perfect, and that's exactly what we wanted to happen.
16:26So now we could stop our traces
16:29because we don't need this log anymore,
16:31and we don't need this log anymore
16:32because we know now that it captures
16:34all the different scenarios.
16:35And by the way, this is exactly the type of logic
16:38where you have to experiment and look at the output
16:40to see when you encounter a problem.
16:42So in this case in scenario, we solve the problem,
16:46do nothing, animation complete.
16:49And thus, the interval is not getting called again.
16:52All right, so I hope that was helpful
16:54and we'll move on now to the next video component.