[유튜브 뮤직 클론코딩] 9. 노래 재생 기능 만들기

군대에서 HTML/CSS/JS 공부용으로 시작한 프로젝트를 이어서 계속 해보고자 한다.

이번에는 노래 재생 기능을 추가해보았다.

 

노래 재생은 다음과 같이 간단한 과정으로 이루어진다.

 

1. 노래 리스트에서 노래 클릭

2. 해당 노래 정보를 플레이어에 표시

3. 노래 음원 재생

 

내가 노래 재생 기능을 구현하는 과정에서 고민한 부분을 기록하고자 한다.

 

1. 노래 리스트에서 노래 클릭

이 부분의 구현은 어렵지 않다.

노래 리스트를 생성할 때, 해당 요소에 click 이벤트 리스너를 추가해주면 되기 때문이다.

 

2. 해당 노래 정보를 플레이어에 표시

노래 정보를 플레이어에 표시할 때, 처음 생각한 아이디어는 아래와 같았다.

 

노래를 클릭하면

>> 해당 노래 정보를 '현재 재생중인 노래 정보' 로서 전역적으로 저장하고

>> 전역적으로 저장한 데이터가 존재하면, 해당 데이터를 토대로 플레이어에 정보를 표시하고

>> 노래를 재생한다.

 

노래 정보를 전역적으로 저장하는 것은 어렵지 않았지만, 전역적으로 저장된 정보가 바뀌었을 때,

이를 플레이어와 같은 다른 노드에 알려주고 싶었다.

 

그래서 방법을 찾다가 Custom Event 를 사용하는 방법을 찾아서 구현해보았다.

노래 리스트 click 이벤트가 발생하면, Custom Event 를 Dispatch 하고,

플레이어 오브젝트에서 Custom Event 를 수신하면, 노래 정보를 업데이트 하고 노래를 재생하는 것이다.

 

그러나 이걸 실제로 구현해보니 이벤트가 발생하는 것까지는 되었으나,

플레이어 오브젝트에서 이벤트를 수신하지 못했다.

(플레이어 오브젝트에서 직접 Custom Event 를 발생시켰을 때는 수신하였다.)

 

이번 기회에 자바스크립트 이벤트에 대해서 공부해보고 싶었으나.. 잘 해결이 되지 않았다.

Event Propagation, Bubblinlg, Capturing 등등에 대해 공부해보았으나 적용을 어떻게 시켜야할 지,

그 이전에 문제의 원인이 무엇인지를 파악하지 못했다.

 

나의 추측은 이벤트가 상위 노드로는 전파되지만, 상위노드에서 다른 하위노드로 전파되지는 않는 것이다.

만약 그렇다면 이벤트를 통해서 노래의 재생 정보를 공유하는 것은 힘들겠다고 생각했다.

 

그래서 다른 방법을 고민해보니, 그냥 간단하게 플레이어 DOM 을 조작해서 노래 정보를 넣는 것이 차선책으로 생각났다.

너무 복잡하게 생각했던 것 같다.

그냥 이렇게 구현하는 것이 오히려 더 깔끔하고 좋아보인다.

3. 노래 재생하기

MDN 문서를 읽어보니 Audio() 라는 객체를 생성해서 노래를 재생할 수 있다고 한다.

그래서 테스트로 아무 음원을 서버에 넣은 뒤, Audio() 객체를 생성하고,

객체에서 노래를 틀 준비가 완료되면 바로 노래를 재생하도록 아래와 같이 코드를 작성하였다.

노래가 아주 잘 재생된다.

하지만 이렇게만 작성하면, 기존에 노래가 재생중일 때, 다른 노래를 클릭하면 노래가 이중으로 재생된다.

그래서 기존에 재생중인 노래가 있다면, 기존 노래의 재생을 그만두는 코드도 추가하여 마무리하였다.

4. 노래 일시정지 기능 구현하기

재생중인 노래를 일시정지하고, 다시 이어서 듣는 기능을 구현하였다.

사실 이건 이미 Audio() 객체에서 제공하는 메소드가 잘 구현되어 있어서 잘 가져다 쓰면 된다.

노래가 일시정지되었다면 다시 재생하고, 아이콘 모양 변경,

아니라면 (노래가 재생중이라면) 일시정지하고, 아이콘 모양 변경

 

그런데 주의할 점이 하나 있다.

Audio에서 제공하는 프로퍼티 중에 played 라는 프로퍼티가 있는데,

이 프로퍼티를 이용하면 기능이 의도대로 작동하지 않는다.

이 프로퍼티는 재생중 여부를 알려주는 것이 아니라, 브라우저가 지금까지 재생한 미디어의 TimeRanges를 반환한다.

 

아무튼 이제 잘 작동한다.

---

실제 작동 모습을 보고 싶다면 http://everdu.com/project/ym_clone/ 에서 확인할 수 있다.

우측 상단의 사람 모양 아이콘을 누르고 회원가입 후 로그인 하거나,

1234123 / 1234123 테스트 계정을 이용해 테스트 해볼 수 있다.

(단, 로그인 유지 시간은 1분이다.)