Create the Audio Scrubber to Control Playback Position
We are creating an input of type range with an associated label, this input is to represent the current playback position in the audio, and the user will be able to change the playback position using the input.
The input value is set to be the media time state, it is added a minimum value of 0 and a maximum value as the duration. The demonstration shows how the media time state updates accordingly when the user changes the time using the input range.
A function called onScrubberChange is added, which takes in an event as an argument and console.logs the value of that event. The onChange event is added to the input, ensuring it works as expected. A variable sets the media time state and the current time on the audio ref.
Think about: Why do we use the event.target.value to set the new mediaTime (reminder that the value of the range is bound to mediaTime....maybe take a look at that with the formatter)
[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.