개발자 99% 커뮤니티에서 수다 떨어요!
안녕하세요! 낭만시대 클래식 음악 스트리밍 사이트 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
페이지를 이동하더라도 플레이어가 새로고침되지 않게 만들고 싶은 데 잘 안 되고 있습니다.
그밖에도 검색기능을 넣으려는데 어떻게 구현하면 좋을지 고민중입니다.
모든 기기에서 최적화된 모습을 보이는 게 최종 목표인데 매일매일 css와 싸움중입니다..!
큰 팁은 없지만 iframe을 화면에서 숨기기위한 width 0 height 0 설정과
Youtube iframe API를 사용해서 재생/일시정지/볼륨조절하는 기능 구현하는 거, 나름 팁이라고 할 수 있을까요..?
iframe의 재생목록까지 다룰 수 있다면 더 간단하고 편할 것 같습니다. 저는 자체 array로 구현하긴 했지만요 🙈
다음주부터 학교가 시작돼서 이번 과제 얼른 후딱 끝내고 학교 공부에 집중하러 잠시 떠납니다...!
모두들 끝까지 화이팅입니다!!! 💪