'MEAN stack/MoonEDM App'에 해당하는 글 7건






1. 플레이리스트 전용페이지 (쪽은 모바일 오른쪽은 데스크톱 )


사용자가 플레이리스트 페이지를 들어올시 보이는 메인화면으로  하단에 플레이,이전,다음버튼을 추가해주었고 


랜덤버튼 및 음량 조절 버튼도 추가했습니다 






2. 플레이리스트 메뉴 


사용자의 플레이리스트를 보여주는 화면입니다  






3.데일리차트


일간 데일리차트를 받아와 보여주는 목록입니다  ( 벅스 데일리차트를 크롤링한 데이터입니다 )


체크박스를 통해 원하는 곡을 클릭하거나 전체 재생목록추가를 클릭시 플레이리스트에 해당곡이 추가가됩니다.






4.플레이리스트 곡실행시 화면 UI


플레이리스트에 저장된 곡을 실행시 플레이되는 화면입니다



이전에작업을 하던 개인프로젝트에 몇가지기능을 추가해봤습니다 방학인지라 카페에 피난와서 끄적끄적이고있습니다


궁금한점있으면 댓글남겨주세요.

'MEAN stack > MoonEDM App' 카테고리의 다른 글

DEVLOG_function.js  (0) 2017.06.20
MoonEDM :: 벅스뮤직 + 아티스트앨범 추가  (0) 2017.03.09
MoonEDM :: 작업일지(3)  (0) 2017.02.18
MoonEDM :: 작업일지(2)  (0) 2017.02.08
MoonEDM :: 작업일지(1)  (0) 2017.02.01

WRITTEN BY
내가달이다

,

'MEAN stack > MoonEDM App' 카테고리의 다른 글

MoonEDM :: 데일리차트추가 & UI변경  (2) 2017.08.14
MoonEDM :: 벅스뮤직 + 아티스트앨범 추가  (0) 2017.03.09
MoonEDM :: 작업일지(3)  (0) 2017.02.18
MoonEDM :: 작업일지(2)  (0) 2017.02.08
MoonEDM :: 작업일지(1)  (0) 2017.02.01

WRITTEN BY
내가달이다

,

포스팅을 근 한달만에 하네요....


이전에 작업하던 기능에서 가수들의 앨범과 곡들을 크롤링한후 다운받을수있도록 추가해봤습니다


++ 추가사항


벅스뮤직을 이용해 크롤링한후 연동시키려 했지만 API가 2013년인가부로 중단되서 크롤링하는걸로 방향을 바꿨습니다


우선 제가 좋아하는 아티스트인 박지윤을 검색해보면 



목록들을 크롤링한후 앨범을 클릭하면 



매치를한후 앨범트랙을 유튜브랑 매칭시켜서 다운을 받을수 있도록 하고 또한 


+ 버튼을 클릭시 이전에 작업해둔 플레이리스트에서 바로 들을수 있도록 추가하였습니다

'MEAN stack > MoonEDM App' 카테고리의 다른 글

MoonEDM :: 데일리차트추가 & UI변경  (2) 2017.08.14
DEVLOG_function.js  (0) 2017.06.20
MoonEDM :: 작업일지(3)  (0) 2017.02.18
MoonEDM :: 작업일지(2)  (0) 2017.02.08
MoonEDM :: 작업일지(1)  (0) 2017.02.01

WRITTEN BY
내가달이다

,

이런저런공부 하다보니 포스팅이 늦었네요 ..


이전 버전에 추가기능을 도입했습니다 


플레이리스트를 만들어 웹상에서 실시간으로 내가원하는곡을 추가해서 들을수있도록 기능을 만들었습니다 



메인페이지



메인페이지의 배경을 바꿔주었습니다 배경이미지는 GIPHY 에서 구했습니다  상단메뉴에 플레이스트를 추가시켜 주었습니다 




플레이리스트






곡명을 검색해서 목록을보여주고 추가를 해주면 해당곡을 실시간으로 스트리밍 해주는 기능을 추가했습니다


만드는데 사용된 프레임워크는 깃허브에 기재했습니다 



깃허브https://github.com/choy1379/MoonEDM

DEMO : https://moonedm.herokuapp.com


'MEAN stack > MoonEDM App' 카테고리의 다른 글

DEVLOG_function.js  (0) 2017.06.20
MoonEDM :: 벅스뮤직 + 아티스트앨범 추가  (0) 2017.03.09
MoonEDM :: 작업일지(2)  (0) 2017.02.08
MoonEDM :: 작업일지(1)  (0) 2017.02.01
MoonEDM :: 0 시작  (0) 2017.01.25

WRITTEN BY
내가달이다

,


이전에 작성했던 포스팅의 작업일지대로 개발해보았습니다 


기본적으로 MEAN stack 기반으로 개발하였고 개발기간은 널널하게 일주일정도 잡았습니다 





메인 페이지입니다 


DJ , tracklist 로 구분을 나누어서 트랙 단일로 검색시 트랙리스트로 검색을 하도록 했습니다 


tracklist



DJ 페이지




이미지 클릭시  모달 로딩화면 입니다 







클릭시 해당유튜브의 영상과 다운로드버튼을 배치해두었습니다


깃헙 0.1v기준입니다 


기본 적인 틀만 우선 개발을 했습니다 


이번주나 다음주내에


개인 사용자별 메모장(?) 겸 입력 페이지를 추가해서  트랙리스트목록들을 붙여 넣은후 배치를 돌려서 다운을받거나 링크를 걸어


주는 페이지를 만들 예정입니다 



깃허브 : https://github.com/choy1379/MoonEDM

DEMO : https://moonedm.herokuapp.com



'MEAN stack > MoonEDM App' 카테고리의 다른 글

DEVLOG_function.js  (0) 2017.06.20
MoonEDM :: 벅스뮤직 + 아티스트앨범 추가  (0) 2017.03.09
MoonEDM :: 작업일지(3)  (0) 2017.02.18
MoonEDM :: 작업일지(1)  (0) 2017.02.01
MoonEDM :: 0 시작  (0) 2017.01.25

WRITTEN BY
내가달이다

,

현재까지의 작업일지를 작성해볼까합니다.


대략적인 홈페이지를 기획하기위해 Axure 을 사용했습니다 



HOME



홈 페이지 부분입니다 


search DJ 부근에 원하는 DJ 를 입력후 검색을 하면 해당DJ 의 플레이 리스트목록을 다음화면에서 보여줍니다 



SEARCH



검색을 한후 목록들을 보여주는 페이지 입니다 


PlayList


플레이리스트의 트랙내용을 보여주는 화면 입니다 


아래는 간단한 실행모습과 데모 페이지입니다 



http://e7chh9.axshare.com/#g=1&p=playlistdj

'MEAN stack > MoonEDM App' 카테고리의 다른 글

DEVLOG_function.js  (0) 2017.06.20
MoonEDM :: 벅스뮤직 + 아티스트앨범 추가  (0) 2017.03.09
MoonEDM :: 작업일지(3)  (0) 2017.02.18
MoonEDM :: 작업일지(2)  (0) 2017.02.08
MoonEDM :: 0 시작  (0) 2017.01.25

WRITTEN BY
내가달이다

,