반응형
게임 이펙트 만들기! ( 2 ) (jquery,gsap, 뮤직플레이어, 리스트)
뮤직 플레이어를 만들어 재생, 정지, 반복, 음악 리스트 버튼의 기능을 만들었습니다.
VSCode
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GAME Effect</title>
<!-- <link rel="stylesheet" href="css/bg.css"> -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/game.css">
<link rel="stylesheet" href="css/music.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200&display=swap" rel="stylesheet">
</head>
<body>
<div class="cursor">
<img src="img/game_mouse02.png" alt>
</div>
<header id="header">
<h1>GAME WORLD</h1>
<div class="time">현재 날짜, 시간출력</div>
</header>
<main>
<div class="icon__box">
<div class="icon1">
<img src="img/game_icon01.png" alt="뮤직">
<span>뮤직 듣기</span>
</div>
<div class="icon2">
<img src="img/game_icon02.png" alt="뮤직">
<span>뮤직 듣기</span>
</div>
<div class="icon3">
<img src="img/game_icon03.png" alt="뮤직">
<span>뮤직 듣기</span>
</div>
<div class="icon4">
<img src="img/game_icon04.png" alt="뮤직">
<span>뮤직 듣기</span>
</div>
</div>
<!-- 뮤직 플레이어 -->
<div class="music__wrap">
<div class="music__inner">
<div class="music__header">
<span class="left"></span>
<h2>Music</h2>
<span class="right"></span>
</div>
<div class="music__contents">
<div class="music__view">
<div class="image">
<img src="img/musicView01.png" alt="음악">
</div>
</div>
<div class="music__control">
<div class="title">
<h3>노래 제목</h3>
<p>노래 작가 이름</p>
</div>
<div class="progress">
<div class="bar">
<audio id="main-audio" src="audio/music_audio01.mp3"></audio>
</div>
<div class="timer">
<span class="current">0:00</span>
<span class="duration">3:55</span>
</div>
</div>
<div class="control">
<span>
<i class="repeat" id="control-repeat" title="전체 반복"></i>
<!-- <i class="repeat_one" id="repeat_one" title="한곡 반복"></i> -->
<!-- <i class="shuffle">랜덤 반복</i>
<i class="stop">정지 반복</i> -->
</span>
<span>
<i class="prev" id="control-prev" title="이전곡 재생"></i>
</span>
<span>
<i class="play" id="control-play" title="재생"></i>
</span>
<span>
<i class="next" id="control-next" title="다음곡 재생"></i>
</span>
<span>
<i class="list" id="control-list" title="재생 목록"></i>
</span>
</div>
<div class="music__list">
<h3>Music List <a href="#" class="close"></a></h3>
<ul>
<!-- <li>
<img src="img/musicView01.png" alt="">
<div><em>아티스트</em>- <strong>제목</strong></div>
<div><span>2:13</span></div>
</li>
<li>
<img src="img/musicView02.png" alt="">
<div><em>아티스트</em>- <strong>제목</strong></div>
<div><span>2:13</span></div>
</li>
<li>
<img src="img/musicView03.png" alt="">
<div><em>아티스트</em>- <strong>제목</strong></div>
<div><span>2:13</span></div>
</li>
<li>
<img src="img/musicView04.png" alt="">
<div><em>아티스트</em>- <strong>제목</strong></div>
<div><span>2:13</span></div>
</li>
<li>
<img src="img/musicView05.png" alt="">
<div><em>아티스트</em>- <strong>제목</strong></div>
<div><span>2:13</span></div>
</li>
<li>
<img src="img/musicView06.png" alt="">
<div><em>아티스트</em>- <strong>제목</strong></div>
<div><span>2:13</span></div>
</li>
<li>
<img src="img/musicView07.png" alt="">
<div><em>아티스트</em>- <strong>제목</strong></div>
<div><span>2:13</span></div>
</li>
<li>
<img src="img/musicView08.png" alt="">
<div><em>아티스트</em>- <strong>제목</strong></div>
<div><span>2:13</span></div>
</li> -->
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- //뮤직 플레이어 -->
</main>
<footer id="footer">
<div class="info">현재 OS정보 출력</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="js/music.js"></script>
<script>
//폴더 드래그, 헤더색 바꾸기
$(".icon1").draggable({
//특정 범위 안에서 드래그로 못빠져나가게 하기
containment: ".icon__box", scroll: false,
start: function() {
//드래그시 커서 이미지(색) 바꾸기
$(".cursor img").attr("src", "img/game_mouse01.png");
//드래그시 헤더 색 바꾸기
$("#header").removeClass("blue yellow green");
$("#header").addClass("red");
}
});
$(".icon2").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse02.png");
$("#header").removeClass("red yellow green");
$("#header").addClass("blue");
}
});
$(".icon3").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse03.png");
$("#header").removeClass("red blue yellow");
$("#header").addClass("green");
}
});
$(".icon4").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse04.png");
$("#header").removeClass("red blue green");
$("#header").addClass("yellow");
}
});
//하단 출력 선택자
let info = document.querySelector(".info");
// 빨간 폴더 이벤트
$(".icon1").mousedown(()=>{
info.innerHTML = "빨간 뮤직 듣기 클릭했습니다.";
});
$(".icon1").draggable({
drag:function(e){
info.innerHTML = "빨간 뮤직 듣기 드래그중 입니다.";
},
}).draggable({
stop:function(e){
info.innerHTML = "빨간 뮤직 듣기 드래그를 놨습니다.";
settime();
}
});
// 파랑 폴더 이벤트
$(".icon2").mousedown(()=>{
info.innerHTML = "파랑 뮤직 듣기 클릭했습니다.";
});
$(".icon2").draggable({
drag:function(e){
info.innerHTML = "파랑 뮤직 듣기 드래그중 입니다.";
},
}).draggable({
stop:function(e){
info.innerHTML = "파랑 뮤직 듣기 드래그를 놨습니다.";
settime();
}
});
// 초록 폴더 이벤트
$(".icon3").mousedown(()=>{
info.innerHTML = "초록 뮤직 듣기 클릭했습니다.";
});
$(".icon3").draggable({
drag:function(e){
info.innerHTML = "초록 뮤직 듣기 드래그중 입니다.";
},
}).draggable({
stop:function(e){
info.innerHTML = "초록 뮤직 듣기 드래그를 놨습니다.";
settime();
}
});
// 노랑 폴더 이벤트
$(".icon4").mousedown(()=>{
info.innerHTML = "노랑 뮤직 듣기 클릭했습니다.";
});
$(".icon4").draggable({
drag:function(e){
info.innerHTML = "노랑 뮤직 듣기 드래그중 입니다.";
},
}).draggable({
stop:function(e){
info.innerHTML = "노랑 뮤직 듣기 드래그를 놨습니다.";
settime();
}
});
//현재시간
function printTime() {
const clock = document.querySelector("#header .time");
let now = new Date();
clock.innerHTML = now.getFullYear() + "년 " +
(now.getMonth()+1) + "월 " +
now.getDate() + "일 " +
now.getHours() + "시 " +
now.getMinutes() + "분 ";
setTimeout("printTime()", 1000);
};
function headerColor() {
}
//현재 OS, 크기
let os = navigator.userAgent.toLowerCase();
let sw = screen.width;
let sh = screen.height;
function prinAgent() {
let os = navigator.userAgent.toLowerCase();
let sw = screen.width;
let sh = screen.height;
if (os.indexOf("windows") >= 0) {
info.innerHTML = "현재 윈도우를 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
} else if (os.indexOf("macintosh") >= 0) {
info.innerHTML = "현재 맥을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
} else if (os.indexOf("iphone") >= 0) {
info.innerHTML = "현재 아이폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
} else if (os.indexOf("android") >= 0) {
info.innerHTML = "현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
}
}
//5초후 현재 OS출력하기
function settime(){
setTimeout(function(){
prinAgent()
},5000);
}
//로딩 됐을시 실행
window.onload = function(){
window.addEventListener("mousemove", e => {
gsap.to(".cursor", {
duration: 0,
left: e.pageX,
top: e.pageY
});
});
printTime(); //오른쪽 상단 시간 실행문
prinAgent(); //현재 OS, 크기 실행문
}
</script>
</body>
</html>
이 코드에서는 jQuery, jQuery UI 및 GSAP 라이브러리를 사용하여 웹 페이지를 조작합니다.
페이지에는 네 개의 아이콘이 있으며, 각각을 드래그할 수 있습니다. 드래그하는 동안, 해당 폴더의 색상에 따라 header의 색상이 변경됩니다. 아이콘을 클릭하면 정보가 footer에 표시됩니다. 아이콘을 드래그한 후에는 시간이 표시됩니다.
뮤직 플레이어를 만들었고 반복, 이전곡, 다음곡, 재생, 정지, 음악 리스트를 기능하는 버튼들이 있습니다.
script
const allMusic = [
{
name : "1. Here it Comes",
artist : "TrackTribe",
img : "musicView01",
audio : "music_audio01"
},{
name : "2. Here it Comes",
artist : "TrackTribe",
img : "musicView02",
audio : "music_audio02"
},{
name : "3. Here it Comes",
artist : "TrackTribe",
img : "musicView03",
audio : "music_audio03"
},{
name : "4. Here it Comes",
artist : "TrackTribe",
img : "musicView04",
audio : "music_audio04"
},{
name : "5. Here it Comes",
artist : "TrackTribe",
img : "musicView05",
audio : "music_audio05"
},{
name : "6. Here it Comes",
artist : "TrackTribe",
img : "musicView06",
audio : "music_audio06"
},{
name : "7. Here it Comes",
artist : "TrackTribe",
img : "musicView07",
audio : "music_audio07"
},{
name : "8. Here it Comes",
artist : "TrackTribe",
img : "musicView08",
audio : "music_audio08"
},{
name : "9. Here it Comes",
artist : "TrackTribe",
img : "musicView09",
audio : "music_audio09"
}
];
const musicWrap = document.querySelector(".music__wrap");
const musicName = musicWrap.querySelector(".music__control .title h3");
const musicArtist = musicWrap.querySelector(".music__control .title p");
const musicView = musicWrap.querySelector(".music__view .image img");
const musicAudio = musicWrap.querySelector("#main-audio");
const musicPlay = musicWrap.querySelector("#control-play");
const musicPrevBtn = musicWrap.querySelector("#control-prev");
const musicNextBtn = musicWrap.querySelector("#control-next");
const musicProgress = musicWrap.querySelector(".progress");
const musicProgressBar = musicWrap.querySelector(".progress .bar");
const musicProgressCurrent = musicWrap.querySelector(".progress .timer .current");
const musicProgressDuration = musicWrap.querySelector(".progress .timer .duration");
const controlRepeat = musicWrap.querySelector("#control-repeat");
const musicListBtn = musicWrap.querySelector("#control-list")
const musicList = musicWrap. querySelector(".music__list");
const musicListUl = musicWrap. querySelector(".music__list ul");
const musicListClose = musicWrap. querySelector(".music__list h3 .close");
let musicCount = allMusic.length;
let musicIndex = 6; // 현재 음악 인덱스
// 음악 재생
const loadMusic = (num) => {
musicName.innerText = allMusic[num-1].name; //뮤직 이름
musicArtist.innerText = allMusic[num-1].artist; //뮤직 아티스트
musicView.src = `img/${allMusic[num-1].img}.png`; //뮤직 이미지
musicView.art = allMusic[num-1].name; //뮤직 이미지 alt
musicAudio.src = `audio/${allMusic[num-1].audio}.mp3`; //뮤직파일
}
//재생 버튼
const playMusic = () => {
musicWrap.classList.add("paused");
musicPlay.setAttribute("title", "정지");
musicPlay.setAttribute("class", "stop");
musicAudio.play();
}
//정지 버튼
const pauseMusic = () => {
musicWrap.classList.remove("paused");
musicPlay.setAttribute("title", "재생");
musicPlay.setAttribute("class", "play");
musicAudio.pause();
}
// 이전 곡 듣기
const prevMusic = () => {
musicIndex <= 1 ? musicIndex = 9 : musicIndex --;
loadMusic(musicIndex);
musicAudio.play();
playListMusic();
}
// 다음 곡 듣기
const nextMusic = () => {
// musicIndex++;
// if(musicIndex >= musicCount){
// musicIndex= 1;
// }
musicIndex >= musicCount ? musicIndex=1 : musicIndex++;
loadMusic(musicIndex);
musicAudio.play();
playListMusic();
}
// 뮤직 진행바
musicAudio.addEventListener("timeupdate", e => {
// console.log(e)
const currentTime = e.target.currentTime; //현재 재생되는 시간
const duration = e.target.duration; //오디오 총 길이
let progressWidth = currentTime/duration * 100; //전체길이에서 현재 진행되는 시간을 백분위 단위로 나눔
musicProgressBar.style.width = `${progressWidth}%`;
// 노래 전체 길이 (분: 초)
musicAudio.addEventListener("loadeddata", () => {
let audioDuration = musicAudio.duration;
let totalMin = Math.floor(audioDuration / 60);
let totalSec = Math.floor(audioDuration % 60);
if(totalSec < 10) totalSec = `0${totalSec}`
musicProgressDuration.innerText = `${totalMin}:${totalSec}`;
});
// 노래 진행 시간 (분: 초)
let currentMin = Math.floor(currentTime / 60);
let currntSec = Math.floor(currentTime % 60);
if(currntSec < 10) currntSec = `0${currntSec}`
musicProgressCurrent.innerText = `${currentMin}:${currntSec}`;
});
// 진행바 버튼 클릭
musicProgress.addEventListener("click",(e)=>{
let progressWidth = musicProgress.clientWidth; //진행바 전체 길이
let clickedOffsetX = e.offsetX; //진행바 기준으로 측정되는 X좌표값
let songDuration = musicAudio.duration; //노래 전체 길이
//백분위 나눈 숫자에 다시 전체 길이를 곱해서 현재 재생값으로 바꿈
musicAudio.currentTime = (clickedOffsetX/progressWidth) *songDuration;
// console.log(musicAudio.currentTime)
});
// 반복 버튼 클릭
controlRepeat.addEventListener("click", () => {
let getAttr = controlRepeat.getAttribute("class");
switch(getAttr){
case "repeat" :
controlRepeat.setAttribute("class", "repeat_one");
controlRepeat.setAttribute("tltle", "한곡 반복");
break;
case "repeat_one" :
controlRepeat.setAttribute("class", "shuffle");
controlRepeat.setAttribute("tltle", "랜덤 반복");
break;
case "shuffle" :
controlRepeat.setAttribute("class", "repeat");
controlRepeat.setAttribute("tltle", "전체 반복");
break;
}
});
// 오디오가 끝나면
musicAudio.addEventListener("ended", () => {
let getAttr = controlRepeat.getAttribute("class");
switch(getAttr){
case "repeat" :
nextMusic();
break;
case "repeat_one" :
playMusic();
break;
case "shuffle" :
let randomIndex = Math.floor(Math.random() * allMusic.length +1); //랜덤 인덱스 생성
// 현재 인덱스와 랜덤 인덱스가 같은경우 한번더 랜덤돌리기
do {
randomIndex = Math.floor(Math.random() * allMusic.length +1);
} while (musicIndex == randomIndex)
musicIndex = randomIndex; //현재 인덱스를 랜덤 인덱스로 변경
loadMusic(musicIndex); //랜덤 인덱스로 변경후 재생
playMusic();
break;
}
playListMusic();
});
// 플레이 버튼 클릭
musicPlay.addEventListener("click", () => {
const isMusicPaused = musicWrap.classList.contains("paused"); //음악 재생중
isMusicPaused ? pauseMusic() : playMusic();
});
// 이전곡 버튼 클릭
musicPrevBtn.addEventListener("click", () => {
prevMusic();
});
// 다음곡 버튼 클릭
musicNextBtn.addEventListener("click", () => {
nextMusic();
});
// 뮤직 리스트 버튼
musicListBtn.addEventListener("click", () => {
musicList.classList.add("show");
});
// 뮤직 리스트 X버튼
musicListClose.addEventListener("click", () => {
musicList.classList.remove("show");
});
// 뮤직 리스트 구현하기
for(let i=0; i<allMusic.length; i++){
let li = `
<li data-index="${i+1}">
<div><img src="img/${allMusic[i].img}.png" alt="${allMusic[i].name}"></div>
<div><em>${allMusic[i].artist}</em>-<strong>${allMusic[i].name}</strong></div>
<audio class="${allMusic[i].audio}" src="audio/${allMusic[i].audio}.mp3"></audio>
<div><span class="audio-duration" id="${allMusic[i].audio}">2:13</span></div>
</li>
`;
// musicListUl.innerHTML += li;
musicListUl.insertAdjacentHTML("beforeend", li);
//리스트에 음악 시간 불러오기
let liAudioDuration = musicListUl.querySelector(`#${allMusic[i].audio}`); //리스트에서 시간을 표시할 선택자
let liAudio = musicListUl.querySelector(`.${allMusic[i].audio}`); //리스트에서 오디오 파일 선택
liAudio.addEventListener("loadeddata", () => {
let audioDuration = liAudio.duration;
let totalMin = Math.floor(audioDuration/60);
let totalSec = Math.floor(audioDuration%60);
if(totalSec < 10) totalSec = `0${totalSec}`;
liAudioDuration.innerText = `${totalMin}: ${totalSec}`;
liAudioDuration.setAttribute("data-duration", `${totalMin}: ${totalSec}`);
});
}
// 뮤직 리스트를 클릭하면 재생
function playListMusic(){
const musicListAll = musicListUl.querySelectorAll("li"); //뮤직리스트 목록
for(let i=0; i<musicListAll.length; i++){
let audioTag = musicListAll[i].querySelector(".audio-duration");
musicListAll[i].setAttribute("onclick", "clicked(this)");
if(musicListAll[i].classList.contains("playing")){
musicListAll[i].classList.remove("playing");
let dataAudioDuration = audioTag.getAttribute("data-duration");
audioTag.innerText = dataAudioDuration;
}
if(musicListAll[i].getAttribute("data-index") == musicIndex){
musicListAll[i].classList.add("playing");
audioTag.innerText = "재생중";
}
}
}
playListMusic();
// 뮤직 리스트를 클릭하면
function clicked(el){
let getIndex = el.getAttribute("data-index");
// alert(getIndex);
musicIndex = getIndex;
loadMusic(musicIndex);
playMusic();
playListMusic();
}
window.addEventListener("load", () => {
loadMusic(musicIndex);
playListMusic()
});
음악 재생기능을 구현하는 JavaScript 코드입니다.
코드를 보면 allMusic이라는 배열에 음악의 이름, 아티스트, 이미지, 오디오 파일 이름 등이 포함되어 있습니다.
그리고 각각의 HTML 요소들을 변수에 할당해주었고, loadMusic 함수를 통해 음악을 불러오고, playMusic 함수와 pauseMusic 함수를 통해 음악을 재생하거나 정지시키는 기능을 구현했습니다.
또한 prevMusic 함수와 nextMusic 함수를 통해 이전 곡과 다음 곡을 들을 수 있으며, 뮤직 진행바를 나타내는 기능도 구현되어 있습니다.
마지막으로, HTML 요소에 이벤트 리스너를 등록하여 마우스 클릭, 마우스 오버 등의 이벤트가 발생했을 때, 해당 함수를 실행하도록 설정해놓았습니다.
// 뮤직 리스트 구현하기
for(let i=0; i<allMusic.length; i++){
let li = `
<li data-index="${i+1}">
<div><img src="img/${allMusic[i].img}.png" alt="${allMusic[i].name}"></div>
<div><em>${allMusic[i].artist}</em>-<strong>${allMusic[i].name}</strong></div>
<audio class="${allMusic[i].audio}" src="audio/${allMusic[i].audio}.mp3"></audio>
<div><span class="audio-duration" id="${allMusic[i].audio}">2:13</span></div>
</li>
`;
// musicListUl.innerHTML += li;
musicListUl.insertAdjacentHTML("beforeend", li);
//리스트에 음악 시간 불러오기
let liAudioDuration = musicListUl.querySelector(`#${allMusic[i].audio}`); //리스트에서 시간을 표시할 선택자
let liAudio = musicListUl.querySelector(`.${allMusic[i].audio}`); //리스트에서 오디오 파일 선택
liAudio.addEventListener("loadeddata", () => {
let audioDuration = liAudio.duration;
let totalMin = Math.floor(audioDuration/60);
let totalSec = Math.floor(audioDuration%60);
if(totalSec < 10) totalSec = `0${totalSec}`;
liAudioDuration.innerText = `${totalMin}: ${totalSec}`;
liAudioDuration.setAttribute("data-duration", `${totalMin}: ${totalSec}`);
});
}
// 뮤직 리스트를 클릭하면 재생
function playListMusic(){
const musicListAll = musicListUl.querySelectorAll("li"); //뮤직리스트 목록
for(let i=0; i<musicListAll.length; i++){
let audioTag = musicListAll[i].querySelector(".audio-duration");
musicListAll[i].setAttribute("onclick", "clicked(this)");
if(musicListAll[i].classList.contains("playing")){
musicListAll[i].classList.remove("playing");
let dataAudioDuration = audioTag.getAttribute("data-duration");
audioTag.innerText = dataAudioDuration;
}
if(musicListAll[i].getAttribute("data-index") == musicIndex){
musicListAll[i].classList.add("playing");
audioTag.innerText = "재생중";
}
}
}
playListMusic();
// 뮤직 리스트를 클릭하면
function clicked(el){
let getIndex = el.getAttribute("data-index");
// alert(getIndex);
musicIndex = getIndex;
loadMusic(musicIndex);
playMusic();
playListMusic();
}
음악 리스트 구현하기
- allMusic 변수에 음악 정보를 저장한 배열이 있습니다.
- for문을 사용하여 각 음악 정보를 HTML 태그로 만들어 리스트에 추가합니다.
- 각 음악 정보에는 이미지, 가수, 음악 제목, 오디오 파일 정보가 있습니다.
- 추가된 리스트에는 클릭 이벤트가 추가되며, 클릭 시 해당 음악이 재생됩니다.
- 추가된 리스트에는 음악의 길이도 표시됩니다.
뮤직 리스트 클릭 시 재생하기
- playListMusic 함수를 사용하여 뮤직 리스트를 클릭하면 해당 음악이 재생됩니다.
- playListMusic 함수는 musicListUl의 모든 li 요소를 가져와서 각 요소에 대해 다음 작업을 수행합니다.
- 요소에 클릭 이벤트를 추가합니다.
- 요소가 현재 재생 중인 음악인 경우, playing 클래스를 제거하고 음악 길이를 다시 표시합니다.
- 요소가 클릭된 음악인 경우, playing 클래스를 추가하고 음악 길이 대신 "재생중"을 표시합니다.
뮤직 리스트 클릭 이벤트 처리하기
- clicked 함수는 뮤직 리스트에서 요소를 클릭할 때 실행됩니다.
- 클릭된 요소의 인덱스를 가져와서, 해당 인덱스에 해당하는 음악을 로드하고 재생합니다.
- playMusic 함수를 호출하여 음악을 재생하고, playListMusic 함수를 호출하여 뮤직 리스트를 업데이트합니다.