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)