Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back

[뮤직플레이어 중간공유] 낭만시대 클래식 음악 스트리밍 사이트 구현중입니다!

#music_player
2년 전
1,550
4

자기소개

안녕하세요! 낭만시대 클래식 음악 스트리밍 사이트 Romantik을 구현중인 Hyeon입니다. 2년전 쯤 니코쌤 강의를 들으며 클론코딩을 접하게 되었고 작년부터 독일에서 개발자가 되기 위한 아우스빌둥(Ausbildung, 이원 직업교육)을 하고 있습니다! 프론트엔드 개발자가 되기 위해 열심히 공부하는 중입니다 😁

회사에서 파이썬을 주로 써서 한동안 파이썬만 공부하다가 프론트엔드의 기본기를 탄탄히 하기 위해 html, css, js를 다시 기초부터 공부하던 중 멜론 컨테스트를 알게 되었고 여러모로 다양한 것들을 배울 수 있을 것 같아 이렇게 컨테스트에 참여하게 되었습니다. ui는 스포티파이와 유투브뮤직을 참고하였습니다.

구현한 기능 소개

차트

  • MongoDB를 사용하여 데이터베이스를 구축하였고 곡의 타이틀, 작곡가, 연주자, 조회수 등의 데이터를 등록해서 조회수대로 불러오는 기능을 구현하였습니다.

  • 초반에는 곡에 대한 정보를 제외하고는 전부 수작업으로 데이터를 등록하였습니다😳. 후반에는 videoId만 기입해넣고 그걸 토대로 Youtube API를 사용해 나머지 정보(조회수, 썸네일url 등)를 받아와 등록하였습니다.

  • 앞으로는 곡을 조회할 때마다 자체 db에서 조회수 ++ 되어 저장될 예정입니다.

플레이어

  • 현재 플레이어의 주요기능들을 구현한 상태입니다. 아직 로그인/회원가입 등 유저 관련 기능은 구현하지 못한 상태라 private 플레이리스트 추가라던가 좋아요 기능들은 아직 구현이 되지 않았습니다.

  • 곡의 재생에는 iframe api를 사용하였습니다.

  • 그러나 api를 이용해 재생목록을 컨트롤 하는 것을 마스터 하지 못하여 🤯 따로 array를 만들어 현재 재생중인 플레이리스트를 구현했습니다.

  • 기본적인 곡의 재생/멈춤, 다음곡 이전곡 넘어가는 기능이 있습니다.

  • 한곡 반복, 플레이리스트 반복, 랜덤재생의 기능도 구현하였습니다.

  • 현재 재생중인 곡의 타이틀, 작곡가, 연주자 정보를 불러와 데스크탑 버전의 플레이어와 모바일 버전의 플레이어에 해당 정보가 뜰 수 있도록 하였습니다.

  • 곡의 전체 길이와 현재까지 재생된 길이를 가져와 mm:ss 로 표시하였고, 곡의 진행상태를 볼 수 있는 progress bar도 구현하였습니다. 유저가 드래그나 클릭을 할 때 그 지점에서 곡이 재생됩니다.

  • 볼륨 조절도 가능합니다.

  • 현재 재생되고 있는 플레이리스트 조회도 가능합니다.

구현 모습 스크린샷

모바일화면

메인

플레이어

현재 플레이리스트

데스크탑 화면

현재 플레이리스트

사운드바

랜덤재생과 한곡반복이 활성화된 모습

깃허브링크: https://github.com/hyeon0118/romantik

4. 고민

페이지를 이동하더라도 플레이어가 새로고침되지 않게 만들고 싶은 데 잘 안 되고 있습니다.

그밖에도 검색기능을 넣으려는데 어떻게 구현하면 좋을지 고민중입니다.

모든 기기에서 최적화된 모습을 보이는 게 최종 목표인데 매일매일 css와 싸움중입니다..!

5. 공유하고 싶은 팁

큰 팁은 없지만 iframe을 화면에서 숨기기위한 width 0 height 0 설정과

Youtube iframe API를 사용해서 재생/일시정지/볼륨조절하는 기능 구현하는 거, 나름 팁이라고 할 수 있을까요..?

iframe의 재생목록까지 다룰 수 있다면 더 간단하고 편할 것 같습니다. 저는 자체 array로 구현하긴 했지만요 🙈


다음주부터 학교가 시작돼서 이번 과제 얼른 후딱 끝내고 학교 공부에 집중하러 잠시 떠납니다...!

모두들 끝까지 화이팅입니다!!! 💪

4 comments
borakim 2년 전
앗 클래식..!! 클래식 좋아해서 가끔 몰아서 듣는데 이런 플레이어 구현이라니 ㅠㅠ너무 반갑고 기쁩니다!! 독일에서 공부중이시군요..! 완성작품이 너무 기대됩니다 ㅠㅠ 멜론클론 잘 구현하셨다면 개인적으로는 유튜브 클론 코딩 강의도 추천드리고 싶어요!! 배우시는 과정에 많이 도움되실 것 같아요!!
hyeon0118 2년 전
@borakim 감사합니다!! 안 그래도 하다보니 유투브 클론 강의를 들어야겠다는 생각이 들더라구요 이번 챌린지 끝나고 수강신청해야겠어요 ☺️
max99 2년 전
와우... css 작업을 너무 잘 하셔서 실제 서비스 같아요! 아무래도 html,css,js를 사용하다 보니 상태관리에 어려움을 겪는 분들이 종종 계시는 것 같네요 ㅠㅠ 잘 해결하셔서 좋은 작품 완성하시기 바랍니다! 클래식이랑 테마가 잘 어울려요 ㅎㅎ
hyeon0118 2년 전
@max99 핫 감사합니다!! 😊😊