Add Fast-Forward and Rewind 15 Second Buttons
We will create two buttons labeled "rewind 15 seconds" and "fast forward 15 seconds." Then, we created two functions, onRewind and onFastForward, to adjust the current time of a media by 15 seconds. The onRewind function will use Math.max to ensure that the time does not go into negative, and the onFastForward function will use Math.min to set a max limit. These functions will be added to the click events of the corresponding buttons. Finally, it sets the new time for the media state and the audio reference.
Think about: Why do you need the second parameter for math.max and math.min?
Lindsey Kopacz: [0:00] Now, we're going to add two buttons. Inside those buttons, it's going to be a rewind and fast forward 15 seconds. [0:09] Next, we're going to create a function called onRewind, make that an arrow function, and the first thing we're going to do is destructure the currentTime from the audioRef.current. We're going to use this currentTime to get the newTime. We're going to create a variable newTime, and that will be the currentTime - 15.
[0:33] Next, we will set the mediaTime to be that newTime, and then let's not forget to make sure that the audioRef.current.currentTime = newTime.
[0:47] We're going to create another function called onFastForward, and it's basically going to be the same. I'm going to copy this and change onRewind to onFastForward. I'm going to change the newTime to be currentTime + 15.
[1:03] This technically works, but let's make our code a little bit cleaner. What we're going to do here is we're going to wrap the currentTime - 15 and the onRewind and wrap that with a Math.max. Then the second parameter is going to be . This helps, because if you're less than 15 seconds from the start point, it'll just go to .
[1:25] We're going to do the same thing, but the opposite for onFastForward. This time we're going to wrap it with a Math.min, and the second parameter is going to be the duration.
[1:36] Next, let's take those functions and now we're going to say onClick and then add the corresponding functions. onRewind for the "rewind 15 seconds" button and onFastForward for the "fast forward 15 seconds" button.
[1:51] Now, you can see if I press fast forward that elapsed time starts increasing. I press play, you'll see that time is increasing. If I press fast forward, you see it's still working. If I rewind, that still works, pause it.
[2:12] To summarize, I created two buttons. The first one said, "rewind 15 seconds" and the next one said, "fast forward 15 seconds." Then I created two functions -- one that's onRewind, and the other is onFastForward.
[2:25] Then in each of those functions, I use the currentTime on the audioRef current, and I either add or subtract 15 seconds based off of the functionality. Then we set the mediaTimeState with that newTime, and then, we're also sure to update that audioRef.current.currentTime with that newTime. Last, we add those functions onto the onClick handlers for those corresponding buttons.