Background에서 음악 재생 기능 만들기
Player라 하기엔 크기가 작고 기능이 재생, 정지기능이 전부지만, 만들 때는 재미있었습니다. 이 기능을 구현하기 전에 상세페이지에서 재생, 정지 기능을 만드는게 목적이었습니다. 각 상세페이지에서 상태를 관리하는 방법으로 재생, 정기 기능을 만들었습니다.
첫 목표를 달성하고, 페이지를 이동해도 음악이 나오게 하려면 어떡해 구현 할지 고민했습니다. 각각의 상세페이지에서 메인 페이지로 이동하게 되면 상태가 변하는걸 안 변하게 하고, 상태를 각 상세페이지에서 관리했던 걸 상세페이지보다 높은 레벨에서 관리하면 페이지가 바뀌어도 음악이 계속 나오지 않을까라는 생각이 들었습니다. App.js를 글로벌 class component로 만들고 App.js 에서 상태의 변화를 관찰하는 간단한 테스트를 시도했습니다.
1. header(App.js에서 랜더되는)와 같은 레벨의 태그를 만듭니다.
2. 눈으로 확인할 수 있게 클릭하면 색깔이 파란색에서 빨간색으로 바뀌는 기능을 구현합니다.
3. 클릭하면 빨간색으로 바꿉니다.
4. 페이지를 이동합니다.
5. 페이지를 이동해도 색깔이 바뀌지 않는걸 확인합니다.
관찰한 결과 색이 바뀌지 않았습니다. test했던 태그를 audio 태그로 바꿨습니다. 상세페이지에 있던 state 을 App.js로 옮기고, props로 상세페이지로 내려줬습니다. 페이지가 이동해도 음악이 멈추지 않고 재생이 되었습니다.
Music Player에 음악이 들어있지 않으면 알림창 띄우기
기능을 구현하고 나니, 음악이 없을 때(처음 페이지에 들어와서 play 버튼을 누를 때)는 음악이 나오지 않으니깐 앨범에서 음악을 재생하라는 알림창을 띄워주고 싶었습니다. App.js의 상태의 track에서 음악 source가 없으면 다음과 같은 문구가 나옵니다.
앨범에서 음악을 재생하세요.