뮤직 플레이어 개발

기간

2025-07-12 ~ 2025-07-19 (일주일)

만든 이유

자주듣는 JPOP 음악을 편리하게 감상할 수 있는 웹 플레이어를 만들고, 익터렉티브한 웹 개발과 React 상태 관리를 익히기 위해 제작했다.

스택

Javascript, React, Zustand, Gsap

주요 기능

• 노래 재생/일시정지 - 전역 상태 isPlaying 로 관리

• 다음, 이전, 트랙 - 클릭 시 currentArtist 의 songIndex를 변경하여 useEffect 를 통해 UI 갱신

• 프로그레스 바 - <input type="range" onChange={}> 를 이용해 오디오의 currentTime을 변경

• 노래 시간 - audio.duration 의 값을 불러와 audio.currentTime 의 재생 진행률에 따라 상태를 변경

• 반응형 UI: 다양한 화면 크기에 대응

배운점

• 점점 쌓이는 State 들을 Zustand 도입 후에 복잡한 상태 관리가 훨씬 깔끔해졌다

• 클릭 사운드를 위해 이벤트를 추가했는데 플레이 버튼 내 이벤트 버블링 문제를 캡처링 단계로 해결했다

• JavaScript의 부동소수점 연산으로 인한 미세한 오차 문제를 직접 경험했다. 오디오 재생 시간이나 다음/이전곡의 범위를 처리할 때 Math 함수를 사용해서 값을 보정하여 해결했다

만약 더욱 발전시킨다면

1. 셔플, 반복재생 구현
2. Web Audio Api 도입 후 오디오 비주얼라이저 추가
3. 가수, 노래 추가, 사용자 커스텀

링크

소스코드

https://github.com/LGSZZM77/Music-App

결과물

https://lgszzm77.github.io/Music-App/