[SpringBoot] 음악 커뮤니티 사이트 제작 (4)

[음악 커뮤니티 사이트 제작]

• 지난 포스팅에 이어 각 페이지별 기능 소개를 진행할 예정입니다.
• 각 페이지별로 구현된 기능 코드와 html, css는 따로 포스팅되지 않을 예정이니 코드를 보고 싶으시다면 아래 깃허브 리포지터리를 방문 후 참고 부탁드립니다.
• 깃허브 리포지터리 주소 : https://github.com/psm817/Apollon

GitHub - psm817/Apollon

 

[차트 목록]

• 사이트 상단 헤더 메뉴의 차트 목록을 통해 TOP100과 장르별 차트를 열람할 수 있습니다.
• TOP100은 음악의 좋아요(추천) 수가 많은 순서대로 나열되며, 만일 해당 수가 같다면 랜덤으로 나열되도록 구현하였습니다.
• 장르별 차트는 장르의 종류별로 음악이 나열됩니다. 장르의 종류는 총 10개이며 발라드, 댄스, 랩/힙합, R&B/소울, 락/메탈, 일렉트로닉, OST, JPOP, 인디, 기타로 구성되어 있습니다.
• 각 차트별 목록에서는 곡 제목 선택을 통해 음악 상세 정보를 볼 수 있으며, 좋아요 버튼을 통한 음악 추천, 각 회원의 플레이리스트에 음악 담아놓기, 음악 1분 미리듣기가 가능합니다.
• 로그인이 되어있지 않은 상태라면 음악 1분 미리듣기 기능을 제외한 나머지 기능들은 실행하지 못하게 됩니다.
• 장르별 차트의 기본 화면에서는 자바 스크립트로 구현된 서클 웨이브 모형이 등장하고 실제로 음악 1분 미리 듣기를 재생할 때 해당 모형이 움직이는 모습을 확인할 수 있습니다.

차트목록 - TOP100 페이지

 

차트목록 - 장르별 차트 페이지

 

[전체 음악 검색]

• 업로드된 음악을 볼 수 있는 공간은 여러군데가 있는데, 이번엔 사이트 상단 헤더의 검색창을 통해 전체 음악에 대해 검색을 하는 페이지를 소개하도록 하겠습니다.
• 검색창에는 음악 제목을 입력할 수 있으며, 검색한 문자가 속한 모든 음악이 검색 결과로 화면에 표시됩니다.
• 이 때도 마찬가지로 곡 제목 선택을 통해 음악 상세 정보를 확인할 수 있으며, 플레이리스트에 음악 담아놓기도 가능합니다.
• 차트목록 메뉴와 마찬가지 위 2가지 기능은 로그인이 되어있을 때만 실행이 가능합니다.

전체 음악 검색 페이지

 

[플레이리스트]

• 차트목록이나 전체 음악 검색을 통해 회원이 듣고 싶은 음악을 담기 버튼으로 각 개인의 플레이리스트에 담을 수 있습니다.
• 플레이리스트에 나열되는 음악의 순서는 사용자가 담는 순서대로 위에서 아래로 나열됩니다.
• 플레이리스트에서는 실제로 음악을 풀 버전으로 재생이 가능하며, 일시정지, 반복재생, 이전 곡 및 다음 곡 재생이 가능합니다.
• 또한 플레이리스트에서는 seeker를 통해 재생되는 음악에서 원하는 구간을 선택하여 재생이 가능하고, 불륨 버튼을 통해불륨 조절도 가능합니다.
• 플레이리스트에서 재생되고 있는 음악은 다른 페이지를 이동해도 음악이 끊기지 않고 연속으로 재생되도록 구현하였고, 실수로 플레이리스트에 음악을 잘못 담았어도 삭제 버튼을 통해 음악을 리스트에서 제외시킬 수 있습니다.
• 이 때 삭제된 음악은 실제로 음악 자체가 삭제되는 것은 아닙니다.

플레이리스트