뮤직 플레이어

바닐라 자바스크립트로 뮤직 플레이어를 만들어 보았다.

 

주요 기능으로는,

1)앨범 커버를 클릭하면 모달창이 띄워지고 앨범정보를 JSON으로부터 받아온다.

2)제목을 클릭하면 음악이 처음부터 재생된다.

3)좋아요 기능 : 하트를 클릭하면 하트가 활성화 된다. but 저장이 되지 않아 새로고침을 했을 때 좋아요가 날라간다...

 

이 중 제일 어렵고 힘들었던건 1번이다.

 

JSON 파일을 만들어서 해당 앨범정보를 작성한 다음, fetch를 이용해 불러온다.

앨범 커버를 클릭하면, html에서 작성한 data-key와 data-value를 기준으로해서 JSON의 value와 dataset.value가 같은 정보를 필터링한다.

그런 다음 모달창을 띄우고 createHTMLString을 통해 필터링된 해당 정보를 모달창 안에 출력한다.

 

2번 기능은 배열이 생성되므로 forEach 메서드를 이용해서 제목이 클릭되면 음원을 멈추고,

이벤트가 일어난 요소에 대하여 currentTime을 0으로 할당한 후 음원을 재생한다.

 

버튼도 마찬가지로 배열이므로 forEach를 사용한다.

버튼이 클릭되면 그 버튼에 active라는 클래스가 포함되어있는지를 판단하여

있으면 cancel을 추가, active를 제거

없으면 active를 추가, cancel을 제거

 

 

 

 

 

 

웹페이지 바로가기 (음악소리가 클 수 있으니 주의하세요)

coolmj97.github.io/JavaScript-Project/music-player/