Сейчас мы объявим здесь константу time и преобразуем значение на слайдере ко времени трека в секундах. Мы укажем здесь Math.round((value / 100) * duration) и далее сохраним это значение в состояние currentTime, укажем setCurrentTime и передадим сюда наше значение time, а также запишем его в свойство audio.currentTime. 

Прекрасно! Мы практически завершили работу над нашим проектом! Давайте взглянем, как наше приложение выглядит в браузере. Сейчас мы видим полный список всех наших треков. В верхней части страницы, мы можем искать их по назанию, а также по исполнителям. При выборе произведения, аудиозапись включается и подсвечивается, а снизу отображается панель для управления ее воспроизведением. В ней мы видим всю информацию о текущем треке, включая текущее время, а при помощи ползунка мы можем перематывать проигрываемый трек.

Последним шагом в работе с данным проектом является оптимизация. Дело в том, что некоторые фрагменты кода можно значительно упростить, что позволит нашему приложению работать быстрее.

Первое, что мы оптимизируем ...

TimeControls + Про memo 


В нашем useEffect, где мы создаем данный setInterval, мы вернем данную колбэк функцию, которая будет вызываться при размонтировании компонента TrimeControls. В ней мы вызовем clearInterval и передадим сюда наш timeInterval. 
Дело в том, что когда мы вызываем функцию setInterval(), браузер создаёт идентификатор для данного интервала и записывает его в свой список активных таймеров. При размонтировании компонента, нам необходимо вызвать clearInterval(), чтобы браузер нашел данный таймер по идентификатору и убрал его из списка.

На этом с разработкой все! Перейдем к деплою=)