Функция:
Музыкальный проигрыватель с Javascript
Местная музыка и обложки альбомов
Значок шрифта Awesome
КОД Гитхаб
HTML:
image-Container показывает обложку альбома.
h2 и h3 – это название песни и имя исполнителя.
Ссылки на звуковые дорожки из folder.img/
Три DOM, извлеченные из объектов с помощью события Javscript.
И время продолжительности выполнения рассчитывается в соответствии с продолжительностью аудио и текущим временем воспроизведения.
Элементы управления воспроизведением — это три значка от fontawesome.
CSS:
Шрифт импортирован из Google Fonts.
И расположите все по центру с помощью flex.
Изображение помещается в контейнер img.
Контейнер выполнения — белый фон.
Прогресс — это анимированный прогресс в соответствии с процентом ширины, который рассчитывается с процентом времени воспроизведения аудио.
Duration-wrapper – это номер текущего времени и длительность.
Элементы управления – кнопка с тремя значками. А кнопка воспроизведения больше, чем основная.
Поскольку fas – это значок , пользователь не должен выбирать его.
Для адаптивного экрана проигрыватель должен быть меньше.
JAVASCRIPT:
Выберите все необходимые DOM в начале файла js.
Информация о музыкальном массиве.
Если играет музыка, аналогичным образом измените значок, название и функцию.
При нажатии кнопки воспроизведения запускается функция в соответствии с логическим значением isPlaying.
LoadSong – это основная функция, связанная с информацией об аудио.
При нажатии кнопки "предыдущая" или "следующая" должна запускаться другая функция, которая меняет индекс текущей песни.
Отображение прогресса основано на процентах текущего игрового времени и длительности.
Левая цифра – текущее время.
Число справа — это общая продолжительность.
Полоса указывает на воспроизведение музыки.
Вызов всех прослушивателей событий в конце.
