Дорогой читатель,
Как насчет создания музыкального плеера с нуля? Замечательно! Давайте начнем.
Структура папок проекта
- index.html - содержит макет HTML, который определяет структуру элементов, которые будут отображаться на странице.
- Папка изображений - содержит изображения .jpg, используемые в нашем проекте.
- Музыкальная папка - содержит аудиофайлы .mp3, используемые в нашем проекте.
- style.css - содержит код CSS для стилизации. Используя CSS, мы можем стилизовать различные части, чтобы сделать их более привлекательными
- script.js - содержит код Javascript. Есть несколько функций, которые работают вместе, чтобы обрабатывать все функции плеера. Пример: воспроизведение, пауза, переключение песен вперед и назад, всплывающее название песни с индикатором выполнения, когда мы проигрываем песню, возможность щелкнуть индикатор выполнения, чтобы перейти к этому месту в песне и т. Д.
HTML макет
Откройте VSCode и создайте базовую структуру HTML в файле index.html с помощью! а затем нажав вкладку. Задайте название как «Музыкальный проигрыватель». Свяжите style.css и script.js с созданным HTML-файлом и свяжите FontAwesome css, чтобы использовать значки воспроизведения, паузы, следующего и предыдущего.
Внутри тела создайте класс аудиоконтейнера, который будет обертывать все вокруг.
<div class =“audio-container" id =“audio-container">
Внутри класса audio-container создайте класс audio-info, который содержит название песни и прогресс, когда мы нажимаем кнопку воспроизведения.
<div class=”audio-info”>
Добавьте тег h4 с id = 'title' внутри класса audio-info, и он будет динамически заполняться с помощью javascript с текущей воспроизводимой песней. .
<h4 id=”title”></h4>
Создайте класс progress-container и внутри него добавьте класс progress, который будет заполняться динамически.
<div class=”audio-container” id=”audio-container”>
<div class=”audio-info”>
<h4 id=”title”></h4>
<div class=”progress-container” id=”progress-container”>
<div class=”progress” id=”progress”></div>
</div>
</div>
Под классом audio-info добавьте тег audio с источником песни и идентификатором.
<audio src=”music/melody.mp3" id=”audio”></audio>
Для хранения изображений
<img src=”images/melody.jpg” alt=”music-cover” id=”cover”>
Создайте класс навигации, и у нас будет три кнопки внутри него для воспроизведения песни, воспроизведения предыдущей песни и следующей песни.
<div class=”navigation”>
<button id=”prev” class=”action-btn”>
<i class=”fas fa-backward”></i>
</button>
<button id=”play” class=”action-btn action-btn-big”>
<i class=”fas fa-play”></i>
<button id=”next” class=”action-btn”>
<i class=”fas fa-forward”></i>
</button>
CSS стили
Требуется довольно много кода CSS, и я объяснил здесь только важные части, а остальная часть кода CSS в основном связана с позиционированием, размером и цветом элементов. Я поделился ссылкой на github в конце сообщения, где вы можете видеть полный код.
Для оформления тела я использовал линейный градиент оттенков желтого и оранжевого цветов в качестве фонового изображения.
background-image: linear-gradient(0deg, rgba(251,252,13,1) 23.8%, rgba(255,170,1,0.99) 92%);
Добавлен background-color как черный, а также добавлена тень для класса audio-container, который обтекает все, кроме тега h1.
background-color: #000;
box-shadow: 0 20px 20px 0 rgb(247, 148, 1);
Чтобы сделать изображение круглым, установите border-radius на 50% в img-container.
border-radius: 50%;
Установите анимацию в img-container, чтобы круглое изображение вращалось во время воспроизведения песни.
animation: rotate 3s linear infinite;
Создание ключевых кадров поворота от 0 до 360 градусов
@keyframes rotate {
from {
transform: rotate(0deg);}
to {
transform: rotate(360deg);}
}
Если в аудио-контейнере есть класс воспроизведения, изображение будет повернуто.
.audio-container.play .img-container img {
animation-play-state: running;
}
Только во время воспроизведения музыки появится информация об аудио. Обратитесь к следующей реализации CSS
Ниже приведен код CSS для индикатора выполнения, показывающий процент завершения песни. Я использовал белый цвет в качестве фона и черный цвет, чтобы показать прогресс.
Логика Javascript
Логика плеера определяется в файле script.js. Есть несколько функций, которые работают вместе для обработки всех функций проигрывателя.
Определение всех переменных и доступ к элементам HTML.
Сначала выбираются необходимые элементы в макете HTML, которые должны быть динамически изменены. используя метод getElementById (), а затем присваивать им имена переменных, чтобы к ним можно было получить доступ и изменить.
Напишите функцию loadSong (song) для динамического обновления источника звука и соответствующего источника изображения. Вызовите функцию для загрузки сведений о песне в DOM, передав значение songIndex. Я принял значение songIndex равным 1, что означает, что музыкальный проигрыватель запускается со второй песни в списке (индекс начинается с 0).
Давайте создадим прослушиватели событий, которые будут прослушивать определенное событие (например, щелчок) и выполнять определенные действия.
Слушатель событий при нажатии кнопки воспроизведения: нажатие кнопки воспроизведения должно запустить песню, и если песня уже воспроизводится, она должна остановиться. Реализуйте функции playSong () и pauseSong (), которые также включают логику для изменения значков с значка воспроизведения на значок паузы и наоборот.
Прослушиватель событий при нажатии кнопок «Назад» и «Далее»: нажатие на кнопку «Предыдущая» вызовет функцию prevSong (), которая должна воспроизвести предыдущую песню в списке, поэтому мы уменьшаем songIndex. Если значение songIndex меньше 0, мы устанавливаем значение songIndex так, чтобы оно указывало на последнюю песню в списке, чтобы песни воспроизводились в цикле. Точно так же нажатие на кнопку «Далее» вызовет функцию nextSong (), которая должна воспроизвести следующую песню в списке, поэтому мы увеличиваем значение songIndex. Если значение songIndex больше или равно количеству песен в списке, мы устанавливаем значение songIndex равным 0.
Приемник событий для обновления хода песни: в аудиотеге HTML есть событие под названием timeupdate. Каждый раз, когда песня играет постоянно, это будет вызываться, и в этом событии мы вызовем функцию updateProgress (). В функции updateProgress () мы получим продолжительность песни из события и currentTime. Вычислите progressPercent, используя формулу (currentTime / duration) * 100, и установите для этого progressPercent значение width прогресса. бар.
Прослушиватель событий при нажатии на полосу выполнения: чтобы перейти к этому месту в песне, когда мы щелкаем в любом месте на прогресс-контейнере, мы вызываем setProgress () функция. Эта функция изменит ход песни в зависимости от нажатия пользователем на полосе выполнения, получая значение смещения оси X, чтобы узнать, где пользователь щелкнул, и вычислить currentTime с помощью формулы (clickX / width) * продолжительность. Таким образом, мы можем перемещаться в любом месте песни.
Прослушиватель событий для проверки окончания песни: API аудио HTML выдает нам событие под названием завершено. Когда песня закончится, мы вызовем созданную ранее функцию nextSong ().
audio.addEventListener(‘ended’, nextSong);
ВОЙЛА !!!!! Музыкальный плеер готов к демонстрации
Полный исходный код можно найти в репозитории Git Hub, ссылка находится здесь
Спасибо за ваш интерес.
