Create the Audio Scrubber to Control Playback Position

[0:00] After the duration span, we are going to add an input type range, and we will set the value of that range to be the media time. [0:12] Next, we'll add a min and set that to , and a max and set that as the duration. Now you'll notice when we adjust the scrubber on the audio element, the input range changes. However, right now we cannot use that range to change the time because we don't have an on change on it. Let's create an onScrubberChange function, pass it an event, create the arrow function, and inside this function we are going to set a new variable called newTime and set that to be the event.target.value. Next we are going to set the mediaTime state to be that variable that we just created. And next we want to make sure that we set the current time on that audio ref.

[0:56] Last, we want to add an onChange event to that input range and set that to be that function. Now let's try to use this to adjust the time.

[1:05] As you can see, the elapsed time on our custom player matches the elapsed time on our audio element. There's one last thing that we want to do to make sure this is accessible. Technically this is a form input. Whenever we have an input, we want to make sure that there is an associated label. So let's create an id for that input and call it timeScrubber. Above the input we are going to add a label, then give it a prop of HTML4 with the same value of that id of that scrubber. HTML4 is the same thing as writing 4 in HTML. We just can't type that because 4 is a keyword in JavaScript. Next inside the label we want to type scrubber. Now when we interact with the time scrubber, it'll be sure to announce as a scrubber and a screen reader user will know what they're interacting with. So to summarize, we created an input type range. We set the value to be the mediaTimeState. We set the min to be and the max to be duration. Then we created an onScrubberChange function and passed in an event. We used that target value to create a new time and set the state to be a new mediaTime. Then we made sure to set that on the audioRef. Last, we made sure that we added a label to our input type range.