KDT 5th 웹개발자 입문 수업 21일차 - 2

뮤직 플레이어 마무리

https://funny-sawine-0efe56.netlify.app/

뮤직 플레이어

 

패널을 전체적으로 이용할 줄 알아야 한다.

for(let i = 0; i < len; i++) {
  articleList[i].style.transform = `rotate(${deg * i}deg) translateY(-100vh)`;

  //사진 일괄 적용
  const pic = articleList[i].querySelector('.pic');
  pic.style.backgroundImage = `url("./source/img/${names[i]}.jpg")`;

  //음악 제목 일괄 적용
  const title = articleList[i].querySelector('.text > h2');
  title.innerHTML = `🎧<br/>${names[i]}`;

  //음악 태그 삽입
  const audio = document.createElement('audio');
  audio.setAttribute('src', `./source/music/${names[i]}.mp3`);
  audio.loop = true;
  articleList[i].append(audio);
}

 

버튼의 키포인트는 prev와 next 버튼을 조종해줄 전역 변수 active가 중요하다.

// Prev Next 버튼
const prev = document.querySelector('.btnPrev');
const next = document.querySelector('.btnNext');

let active = 0; //회전 위치 변수
let num = 0;    //회전 각도 변수

prev.addEventListener('click', function() {
  frame.style.transform = `rotate(${deg * ++num}deg)`; // Prev 버튼을 누르면 시계방향으로 패널 이동

  if(active === 0) { //가장 처음 패널이 0
    active = len - 1;
  } else {
    active -= 1;
  }

  for(let e of articleList) {
    e.classList.remove('on');
    e.querySelector('.pic').classList.remove('on');
    e.querySelector('audio').autoplay = false;
    e.querySelector('audio').pause();
  }
  articleList[active].classList.add('on');
  articleList[active].querySelector('.pic').classList.add('on');
  articleList[active].querySelector('audio').play();
  beforeSong = articleList[active];
});

next.addEventListener('click', function() {
  frame.style.transform = `rotate(${deg * --num}deg)`;

  if(active === len - 1) {
    active = 0;
  } else {
    active += 1;
  }

  for(let e of articleList) {
    e.classList.remove('on');
    e.querySelector('.pic').classList.remove('on');
    e.querySelector('audio').autoplay = false;
    e.querySelector('audio').pause();
  }
  articleList[active].classList.add('on');
  articleList[active].querySelector('.pic').classList.add('on');
  articleList[active].querySelector('audio').play();
  beforeSong = articleList[active];
});

 

play.addEventListener('click', function(e) {
    if(beforeSong === 0) {
      beforeSong = e.currentTarget;
    } else if (beforeSong !== e.currentTarget) {
      beforeSong.closest('article').querySelector('audio').pause();
      beforeSong.closest('article').querySelector('.pic').classList.remove('on');
      beforeSong = e.currentTarget;
    }

    beforeSong.closest('article').querySelector('.pic').classList.add('on');
    beforeSong.closest('article').querySelector('audio').play();
      //e.target.closest('article').querySelector('.pic').classList.add('on');
  });

  pause.addEventListener('click', function(e) {
    if(beforeSong === 0) {
      beforeSong = e.currentTarget;
    } else if (beforeSong !== e.currentTarget) { 
      beforeSong.closest('article').querySelector('.pic').classList.remove('on');
      beforeSong = e.currentTarget;
    }
    beforeSong.closest('article').querySelector('audio').pause();
  });

  reload.addEventListener('click', function(e) {
    if(beforeSong === 0) {
      beforeSong = e.currentTarget;
    } else if (beforeSong !== e.currentTarget) {
      beforeSong.closest('article').querySelector('audio').pause();
      beforeSong.closest('article').querySelector('.pic').classList.remove('on');
      beforeSong = e.currentTarget;
    }

    e.currentTarget.closest('article').querySelector('.pic').classList.add('on');
    e.currentTarget.closest('article').querySelector('audio').load();
    e.currentTarget.closest('article').querySelector('audio').play();
  });
}

플레이랑 일시정지 버튼이 prev,next 버튼이랑 자꾸 꼬여서 전역 변수로 눌러준 버튼 정보를 담는 beforeSong을 만들어주었고,,

이를 활용해서 다른 기능을 구현해줬다.

 

추가로 prev와 next 버튼만으로도 재생이 가능하게 만들었다.