В этой статье мы напишем музыкальный плеер, который будет выглядеть так:
Это и все последующие изображения взяты отсюда.
Подготовка и настройка среды
Я предполагаю, что у вас есть знания о следующих технологиях:
- JavaScript
- HTML/CSS
Настройка среды проста: у вас должен быть предварительно установлен node.js для запуска команды в терминале.
Перейдите в каталог, в котором вы хотите создать проект. Теперь запустите терминал и введите приведенную ниже команду, чтобы установить react-проект.
Удалите шаблон полностью и ненужный код. Теперь мы можем продолжить.
Зависимости
Нам нужно установить следующие библиотеки в наш проект:
- use-sound будет обрабатывать аудиофайл. Он будет загружать, воспроизводить и приостанавливать звук вместе с другими функциями.
Установите его с помощью следующей команды:
- react-icons добавит значки воспроизведения, паузы, следующей и предыдущей композиции в плеер.
Установите его с помощью следующей команды:
Player.js
Создайте каталог component
в папке src
. Внутри создайте компонент с именем Player.js
. Этот компонент будет нашим музыкальным проигрывателем.
Импорт
Библиотеки, которые нужно импортировать в файл:
Воспроизведение и приостановка звука
Давайте реализуем обязательную функцию проигрывателя, которая отвечает за воспроизведение и приостановку звука.
Вверху у нас есть состояние isPlaying
для хранения текущего статуса проигрывателя. Это будет полезно при условном рендеринге значка воспроизведения/паузы в соответствии со статусом проигрывателя.
Нам нужно инициализировать файл useSound
со звуком. Он вернет воспроизведение, паузу, продолжительность и метод звука.
play
и pause
для воспроизведения и приостановки звука. duration
для длины дорожки в миллисекундах. sound
предоставит нам метод howler.js для звука.
Создайте функцию для обработки кнопок воспроизведения и паузы. Вот код для него.
Теперь пришло время добавить компонент пользовательского интерфейса плеера в return
. Вот код для него.
Для обложки я использовал Loren Picsum для генерации случайного изображения.
Вы можете посмотреть здесь CSS-файл:
Запустите сервер react. Если все хорошо, вы сможете увидеть экран ниже.
Нажмите на кнопку воспроизведения, чтобы воспроизвести аудио.
Добавление временной шкалы аудио с текущим временем и продолжительностью аудио
Теперь давайте добавим временную шкалу в плеер. Временная шкала будет контролироваться пользователем. Любые изменения в нем изменят текущую позицию аудио.
Давайте посмотрим на состояние, которое мы используем. Ниже приведены комментарии для объяснения каждого состояния.
Мы получаем свойства длительности из файла useSound
. Поскольку продолжительность указывается в миллисекундах, мы преобразовали ее в минуты и секунды.
Теперь для текущей позиции аудио у нас есть метод sound.seek([])
. Мы запускаем эту функцию каждую секунду, чтобы изменить текущую позицию проигрывания звука. Затем получаем значение позиции проигрывания в секундах. Переводим в минуты и секунды. После преобразования мы устанавливаем состояние с текущим значением. Вот код для него.
Теперь о возвращаемом значении. Вот код.
Значение входного сигнала диапазона является second
-состоянием, которое сообщает позицию проигрывания аудио. При изменении диапазона пользователем, мы вызываем метод soud.seek()
, чтобы изменить текущую позицию аудио.
Вывод
После успешного завершения проекта вы сможете увидеть:
Дополнительные возможности
Вы можете работать над музыкальным проигрывателем, чтобы добавить дополнительные функции, например:
- Приложение загружает много песен, однако в настоящее время воспроизводит только одну песню. Используйте кнопки перемотки трека для смены трека.
- Изменение названия и альбома аудио в соответствии с проигрываемой песней.
- Добавьте больше функций, которые, по вашему мнению, должен иметь музыкальный проигрыватель.
Заключение
Мы создали собственный музыкальный плеер. Этот проект поможет вам в обработке аудиофайлов в React. Мы добавили функции воспроизведения и паузы. Также добавлена временная шкала аудио. Пользователи могут изменить текущую позицию аудио на временной шкале. Не стесняйтесь добавлять дополнительные функции в проект. Я надеюсь, что этот проект помог вам понять метод обработки музыки в React.
Комментарии