Javascript(소스 코드)를 사용하여 뮤직 플레이어 프로젝트 만들기

2022-10-19 last update

9 minutes reading beginners programming webdev javascript

codewithrandom 블로그에 오신 것을 환영합니다. html, css 및 javascript 코드를 사용하여 음악 플레이어를 만듭니다. 우리는 재생, 일시 중지 및 앞으로 또는 뒤로 버튼을하는 완전한 음악 플레이어 시스템을 만듭니다. 음악 플레이어 html을 만드는 방법을 배웁니다.
우리는 이 뮤직 플레이어 html에 html & css와 javascript를 사용합니다. 우리 블로그를 즐기시기 바랍니다. 음악 플레이어 html의 기본 html 구조부터 시작하겠습니다.

뮤직 플레이어용 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>

뮤직 플레이어에 대한 모든 HTML 코드가 있습니다. 이제 CSS 없이 출력을 볼 수 있으며 음악 플레이어용 CSS를 작성합니다.

산출

뮤직 플레이어용 CSS 코드

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];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;
}

뮤직 플레이어에 대한 모든 CSS 코드가 있습니다. 이제 Html CSS For Music Player로 출력을 볼 수 있습니다. 그런 다음 음악 플레이어용 Javascript 코드를 작성합니다. 다음은 업데이트된 출력 CSS입니다.

출력 HTML CSS 음악 플레이어

이제 뮤직 플레이어용 자바스크립트 코드를 작성하세요!

뮤직 플레이어용 자바스크립트 코드

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, css 및 javascript를 사용하는 뮤직 플레이어 코드가 마음에 드셨으면 합니다. 출력 비디오와 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프론트엔드 개발에 대한 지식을 얻으십시오. 고맙습니다

이 게시물에서는 간단한 HTML과 CSS, 그리고 자바스크립트를 사용하여 뮤직 플레이어를 만드는 방법을 배웁니다. 우리가 실수하거나 혼란스러운 점이 있으면 댓글을 남겨 답장을 보내거나 쉬운 학습을 도와주세요.

작성자 – Random/Anki가 있는 코드

일부 관련 주제 -

simple-css-waves-wave-background-css-pure-css-wave

add-to-cart-button-animation-add-to-cart-button-html-css-javascript

restaurant-website-html-css

age-calculator-javascript-age-calculator-using-html-css-javascript

dinogame-dino-game-using-html-css-javascript-chrome-dinogame

인생을 더 쉽게 만들기 위해 알아야 할 5가지 JavaScript 배열 방법

HTML, CSS 및 Javascript를 사용하여 캘린더 만들기