Привет Кодер! Добро пожаловать в блог Codewithrandom. В этой статье мы создадим музыкальный проигрыватель с помощью HTML, CSS и JavaScript. Мы создаем полнофункциональную систему Музыкальный проигрыватель с кнопками для воспроизведения, паузы, перехода вперед и назад с использованием кода JavaScript.
Мы узнаем, как сделать музыкальный проигрыватель Advance, который показывает названия музыки и вращающиеся миниатюры песни в музыкальном проигрывателе, а также многие другие функции, поэтому давайте начнем создавать.
Музыкальный проигрыватель — это инструмент, который используется для воспроизведения музыки в таких форматах, как MP3, WAV и т. д. При прослушивании песен музыкальный проигрыватель полезен. Мы регулярно слушаем музыку на музыкальном плеере. Spotify, Google Music и другие популярные сервисы потоковой передачи музыки — вот некоторые примеры музыкальных проигрывателей.
Мы все знаем, что управление кодом важно при создании проекта, чтобы пользователю было легко использовать этот код и в будущем. Таким образом, мы будем следовать тому же методу, которым мы будем создавать различные файлы для создания нашего проекта.
- index.html – определяет структуру элементов, которая будет отображаться на странице с помощью макета HTML.
- style.css – включает стилизацию кода CSS. Мы можем стилизовать различные части с помощью CSS, чтобы улучшить визуальную привлекательность.
- Index.js – включает программирование на JavaScript. Чтобы игрок мог выполнять все свои функции, ряд функций должен взаимодействовать. Например, возможность воспроизведения, паузы, переключения между песнями, отображения названия песни и индикатора выполнения во время ее воспроизведения, а также предоставление пользователю возможности щелкнуть индикатор выполнения, чтобы перейти к определенному месту в песне, — все это примеры функции.
Шаг 1: HTML-код музыкального проигрывателя: -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /> <title>Music Player</title> </head> <body> <h1>Music Player</h1> <div class="music-container" id="music-container"> <div class="music-info"> <h4 class="title" id="title"></h4> <div class="progress-container" id="progress-container"> <div class="progress" id="progress"></div> </div> </div> <audio src="./music/happyrock.mp3" id="audio"></audio> <div class="img-container"> <img src="./images/happyrock.jpg" alt="music-cover" id="cover" /> </div> <div class="navigation"> <button id="prev" class="action-btn"> <i class="fa fa-backward" aria-hidden="true"></i> </button> <button id="play" class="action-btn action-btn-big"> <i class="fa fa-play" aria-hidden="true"></i> </button> <button id="next" class="action-btn"> <i class="fa fa-forward" aria-hidden="true"></i> </button> </div> </div> <script src="script.js"></script> </body> </html>
Во-первых, давайте создадим файл index.html. Мы включим туда CSS для нашего Style.css. Мы будем использовать некоторые значки в этом проекте, поэтому мы добавим ссылку на потрясающий шрифт в наш раздел Head, чтобы включить эти значки в наш проект.
Теперь мы интегрируем функцию Javascript в наш проект, добавив ссылку на наш Javascript. Поскольку мы хотим, чтобы браузер отображал наш javascript в конце, и поскольку мы хотим, чтобы наша функция запускалась только после тела нашего проекта, мы включим ссылку внутри нашего тела.
//Head Section <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /> //Body Section <script src="app.js"></script>
Добавление структуры HTML-кода музыкального проигрывателя:
- Прежде всего, используя селектор тегов ‹h1›, мы дадим заголовок нашему музыкальному проигрывателю.
- Теперь внутри контейнера, который мы только что создали для музыки, мы создадим еще один div для информации о музыке. Наконец, мы добавим название музыки, используя тег ‹h4›. Все это будет сделано с помощью тега
‹div›. - Кнопки «Далее», «Предыдущий» и «Воспроизведение/Пауза» теперь будут включены в виде значков в раздел навигации по музыке.
Есть весь HTML-код музыкального проигрывателя. Теперь вы можете увидеть вывод без CSS, затем мы напишем CSS для нашего музыкального проигрывателя.
Вывод только HTML-кода:-
Шаг 2 — Код музыкального проигрывателя CSS: —
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
* {
outline: none;
box-sizing: border-box;
}
body {
background-image: linear-gradient(
0deg,
rgba(247, 247, 247, 1) 23.8%,
rgba(252, 221, 221, 1) 92%
);
font-family: "Open Sans", sans-serif;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.music-container {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
display: flex;
padding: 20px 30px;
position: relative;
margin: 100px 0;
z-index: 10;
}
.img-container {
position: relative;
width: 110px;
}
.img-container::after {
content: "";
background-color: #fff;
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%, 50%);
box-shadow: 0 0 0px 10px #000;
}
.img-container img {
border-radius: 50%;
object-fit: cover;
height: 110px;
width: inherit;
position: absolute;
bottom: 0;
left: 0;
animation: rotate 3s linear infinite;
animation-play-state: paused;
}
.music-container.play .img-container img {
animation-play-state: running;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.action-btn {
background-color: #fff;
border: 0;
color: #dfdbdf;
font-size: 20px;
cursor: pointer;
padding: 10px;
margin: 0 20px;
}
.action-btn.action-btn-big {
color: #cdc2d0;
font-size: 30px;
}
.music-info {
background-color: rgba(255, 255, 255, 0.5);
width: calc(100% - 40px);
padding: 10px 10px 10px 150px;
border-radius: 15px 15px 0px 0px;
position: absolute;
top: 0;
left: 20px;
opacity: 0;
transform: translateY(0%);
transition: transform 0.3s ease-in, opacity 0.3s ease-in;
z-index: 0;
}
.music-container.play .music-info {
opacity: 1;
transform: translateY(-100%);
}
.music-info h4 {
margin: 0;
}
.progress-container {
background-color: #fff;
border: 5px;
cursor: pointer;
margin: 10px 0;
height: 4px;
width: 100%;
}
.progress {
background-color: #fe8daa;
border-radius: 5px;
height: 100%;
width: 0%;
transform: width 0.1s linear;
}
Шаг 1.Мы добавим несколько новых шрифтов Google в наш музыкальный проигрыватель, используя ссылку для импорта Google, и воспользуемся универсальным выбором (*), чтобы задать для контура значение «нет», а для размера окна — значение «нет». «пограничная коробка».
Мы применим фон с линейным градиентом к основной части веб-страницы с помощью селектора тега body. Мы также будем использовать свойство font-family, чтобы установить семейство шрифтов как «open-sans», и свойство text-align для выравнивания текста по центру.
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
* {
outline: none;
box-sizing: border-box;
}
body {
background-image: linear-gradient(
0deg,
rgba(247, 247, 247, 1) 23.8%,
rgba(252, 221, 221, 1) 92%
);
font-family: "Open Sans", sans-serif;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
Шаг 2. Теперь мы стилизуем музыкальный контейнер с помощью селектора классов. Мы сделаем фон белым, а нашему звуковому контейнеру придадим тень, используя свойство box shadow. Мы также дали нашему музыкальному контейнеру отступ в 100 пикселей.
Используя ключевые кадры, мы добавим эффект анимации в наш музыкальный проигрыватель, мы добавим эффект вращения на музыкальный диск, а также добавим различные ключевые кадры, чтобы придать нашему музыкальному проигрывателю вращающийся вид.
.img-container img {
border-radius: 50%;
object-fit: cover;
height: 110px;
width: inherit;
position: absolute;
bottom: 0;
left: 0;
animation: rotate 3s linear infinite;
animation-play-state: paused;
}
.music-container.play .img-container img {
animation-play-state: running;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.action-btn {
background-color: #fff;
border: 0;
color: #dfdbdf;
font-size: 20px;
cursor: pointer;
padding: 10px;
margin: 0 20px;
}
.action-btn.action-btn-big {
color: #cdc2d0;
font-size: 30px;
}
.music-info {
background-color: rgba(255, 255, 255, 0.5);
width: calc(100% - 40px);
padding: 10px 10px 10px 150px;
border-radius: 15px 15px 0px 0px;
position: absolute;
top: 0;
left: 20px;
opacity: 0;
transform: translateY(0%);
transition: transform 0.3s ease-in, opacity 0.3s ease-in;
z-index: 0;
}
.music-container.play .music-info {
opacity: 1;
transform: translateY(-100%);
}
.music-info h4 {
margin: 0;
}
Шаг 3.Полоса выполнения теперь будет иметь стиль, добавленный с помощью селектора класса (.progress-container). Мы выберем белый цвет фона и зададим нашему индикатору прогресса границу в 5 пикселей.
.progress-container {
background-color: #fff;
border: 5px;
cursor: pointer;
margin: 10px 0;
height: 4px;
width: 100%;
}
.progress {
background-color: #fe8daa;
border-radius: 5px;
height: 100%;
width: 0%;
transform: width 0.1s linear;
}
Есть весь код CSS для музыкального проигрывателя. Теперь вы можете увидеть вывод с помощью HTML CSS для музыкального проигрывателя, затем мы напишем код Javascript для нашего музыкального проигрывателя. Вот наш обновленный выходной CSS.
Вывод HTML + Css музыкального проигрывателя
Шаг 3: Код музыкального проигрывателя JavaScript: -
const musicContainer = document.getElementById("music-container");
const playBtn = document.getElementById("play");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");
const audio = document.getElementById("audio");
const progress = document.getElementById("progress");
const progressContainer = document.getElementById("progress-container");
const title = document.getElementById("title");
const cover = document.getElementById("cover");
// Songs Titles
const songs = ["happyrock", "jazzyfrenchy", "ukulele"];
// KeepTrack of song
let songIndex = 0;
// Initially load song details into DOM
loadSong(songs[songIndex]);
// Update song details
function loadSong(song) {
title.innerText = song;
audio.src = `./music/${song}.mp3`;
cover.src = `./images/${song}.jpg`;
}
// Play Song
function playSong() {
musicContainer.classList.add("play");
playBtn.querySelector("i.fa").classList.remove("fa-play");
playBtn.querySelector("i.fa").classList.add("fa-pause");
audio.play();
}
// Pause Song
function pauseSong() {
musicContainer.classList.remove("play");
playBtn.querySelector("i.fa").classList.add("fa-play");
playBtn.querySelector("i.fa").classList.remove("fa-pause");
audio.pause();
}
// Previous Song
function prevSong() {
songIndex--;
if (songIndex < 0) {
songIndex = songs.length - 1;
}
loadSong(songs[songIndex]);
playSong();
}
// Next Song
function nextSong() {
songIndex++;
if (songIndex > songs.length - 1) {
songIndex = 0;
}
loadSong(songs[songIndex]);
playSong();
}
// Update Progress bar
function updateProgress(e) {
const { duration, currentTime } = e.srcElement;
const progressPerCent = (currentTime / duration) * 100;
progress.style.width = `${progressPerCent}%`;
}
// Set Progress
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
}
// Event Listeners
playBtn.addEventListener("click", () => {
const isPlaying = musicContainer.classList.contains("play");
if (isPlaying) {
pauseSong();
} else {
playSong();
}
});
// Change Song
prevBtn.addEventListener("click", prevSong);
nextBtn.addEventListener("click", nextSong);
// Time/Song Update
audio.addEventListener("timeupdate", updateProgress);
// Click On progress Bar
progressContainer.addEventListener("click", setProgress);
// Song End
audio.addEventListener("ended", nextSong);
Для управления всеми функциями проигрывателя взаимодействует ряд функций. Доступ к компонентам HTML и определение всех переменных.
Требуемые компоненты макета HTML, которые должны быть изменены динамически, сначала выбираются с помощью метода getElementById(), а затем им присваиваются имена переменных, чтобы к ним можно было обращаться и обновлять.
Теперь мы напишем различные функции для различных функций. В функции будет создана функция playsonf, после чего мы просто добавим еще один класс с помощью метода add.classlist. Изменения значков воспроизведения и паузы будут производиться с помощью функции add.classlist.
Как и в случае с предыдущим событием, мы разработаем для него функцию и будем использовать прослушиватель событий щелчка, когда пользователь щелкает символ, запуская событие щелчка и изменяя музыкальный проигрыватель.
Окончательный вывод музыкального проигрывателя с использованием кода Html и Javascript: -
примечание: используйте музыку и изображения в музыкальном проигрывателе самостоятельно!
Мы завершили наш раздел javascript для музыкальных плееров. Вот наш обновленный вывод с javascript. Надеюсь, вам понравился код музыкального проигрывателя с использованием html, css и javascript. Вы можете увидеть выходное видео и скриншоты проекта. Смотрите другие наши блоги и получайте знания в области фронтенд-разработки. Спасибо
В этом посте мы узнаем, как создать Музыкальный проигрыватель, используя простой HTML, CSS и javascript. Если мы допустили ошибку или какую-либо путаницу, пожалуйста, оставьте комментарий, чтобы ответить или помочь вам в легком обучении.
Автор — Code With Random/Anki
Какой редактор кода вы используете для этого музыкального проигрывателя?
Я лично рекомендую использовать VS Code Studio, он очень прост и удобен в использовании.
Является ли этот проект Music Player отзывчивым или нет?
Да! Этот проект музыкального проигрывателя является адаптивным.
Используете ли вы какие-либо внешние ссылки для создания этого проекта?
Нет! этот музыкальный проигрыватель создан только с использованием кода Html, Css и JavaScript.
