-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Sencha Touch 2 WebApp Example Music Player WebApp
4shared 파일 공유사이트의 API를 이용하여 노래를 검색하고 앨범에 노래를 담고 들을 수 있는 서비스이다. 검색은 4shared에서 제공해주는 API xml문서를 활용했고 로컬스토리지(LocalStorage)에 데이터를 저장하여 앨범 기능을 구현하였다. 앨범목록에서 노래를 들을 때 재생 컨트롤러바가 있어서 재생부분 변경, 이전(다음)곡 재생,재생 방식, 반복 설정을 할 수 있고 레코드판을 터치하여 돌리는 방식 재미있는 UI를 통해 재생부분을 앞(뒤)로 이동할 수 있다.
처음에는 간단히 검색을 기능 구현을 목표로 했고 검색 기능을 구현한 후에는 앨범 기능을 구현을 목표로 했고 나중에 데이터 초기화를 위한 설정 페이지를 따로 만들어 보았다.
4shared 센차 터치 웹앱 메뉴 구성도
- 홈화면 페이지, 검색 페이지, 앨범 페이지
[1]. 홈 화면
- 간단한 사용법을 설명하기 위한 페이지이다.
[2]. 검색 페이지
-
노래 미리듣기 : 노래를 들어보고 맘에 드는 노래는 자신의 앨범에 추가 가능하다.
-
다음 검색 결과 보기 : 위로 잡아 당겼다가 놓는 방식으로 다음 검색결과를 볼 수 있다.
-
재생목록 앨범에 노래 담기 : 검색하고 검색된 노래를 재생목록 앨범에 추가하여 앨범페이지에서 추가한 노래를 연속으로 들을 수 있다.
[3]. 앨범 페이지
- 나만의 앨범, 최근 들은 곡 목록, 재생목록, 스페셜 앨범 4가지 타입의 앨범목록이 존재한다.
[3.1]나만의 앨범 목록
-
자신만의 앨범을 추가할 수 있다.
-
또한 앨범 목록 수정 버튼을 눌러서 앨범을 수정/관리 할 수 있다.
[3.2] 최근 들은 곡 리스트
-
검색 페이지나 앨범 페이지에 들은 곡들은 전부 최근 들은 곡 목록에 저장된다.
-
노래 목록 수정(삭제)버튼을 누른 후 삭제 또는 드래그 앤 드랍으로 곡 순서를 변경할 수 있다
[3.3] 재생 목록
- 검색 리스트에서 +버튼을 눌러 추가한 곡들을 재생목록에서 들을 수 있다.
[3.4] 스페셜 앨범 목록
- 앱 관리자가 직접 인기있는 오디션 프로그램이나 TV 음악방송에 나오는 노래를 스페셜 앨범으로 구성할 수 있도록 구성해 놓았다.
[3.5] 앨범 재생 화면
- 컨트롤바와 돌아가는 레코드판을 터치해서 재미있는 UI를 경험할 수 있다.
※레코드판 부분은 JQUERY 플러그인을 이용했다.※
{1}. Pop메서드를 사용하지도 않았는데 NavigationView컴포넌트 안의 Toolbar 안에 존재하는 뒤로가기 버튼를 포함하여 아무 버튼을 누르면 바로 naviagationview의 Pop메서드가 실행 되어버림
해결책 : 뒤로가기 버튼 클릭 이벤트를 컨트롤하기 위해 pop 이벤트 대신 back이벤트를 Listener 이벤트 등록해야 한다.
{2}. 오디오 컴포넌트가 지정된 mp3를 다운 받아 재생 되기전(버퍼링 시) stop 함수를 호출 시 함수가 재대로 동작 하지 않고 버퍼링 후 재생되어 버린다.
해결책 : setUrl(null) 함수를 호출하면 이런 현상을 방지 할 수 있지만 다시 재생되기 위해서는 다시 url설정을 해주어야만 한다.
{3}. NavigationView의 툴바 제목길이가 길면 툴바의 버튼이 안 눌러지는 현상(css의 zindex 문제) 해결을 위해 titleComponent의 setWidth 함수를 호출해서 길이 변경하려고 했지만 길이가 변경되지 않았다.
해결책 : NavigationView를 쓰지 않고 기본적인 toolbar 컴포넌트로 다시 구현하여 긴 제목은 줄이고 뒤부분에 “…”으로 표시되도록 구현했다.
안드로이드 운영체제 웹킷 기반 프라우저를 가지고 있는 스마트폰의 경우 Audio 재생이 (크롬,사파리) 웹 브라우져와 달리 동작 할 수도 있다.
개발 마지막 단계에서는 아이패드, 아이폰, 갤럭시탭, 갤럭시폰을 빌려가지고 직접 테스트해보면서 무엇이 문제 인지 그리고 기기별로 어떤 차이점이 존재하는지 알게 되었다. 특히 Audio컴포넌트의 경우 url이 웹에 있는 mp3를 재생하는 경우 다운받는 시간이 걸리게 됨으로 바로 플레이를 할수 없다. 따라서 이 시간(버퍼링 시간) 동안에는 현재 재생시간(Current Time)과 총 재생시간(Duration)에 대한 데이터를 제대로 가져올 수 없고 가져오는 값들은 기기마다 다르다. 위 경우 테스트 해본결과 아이폰, 아이패드에서는 총 재생시간에 대한 값으로 크롬과 마찬가지로 NaN 값을 가지고 있고 안드로이드 운영체제 장치에서는 기기마다 브라우저마다 차이가 있는데 내가 테스트한 갤럭시S2에서는 총 재생시간에 대한 값으로 “1” ,LG Optimous LTE 총 재생시간에 대한 값으로 “100”을 가지고 있었다.
또한 자동재생 설정을 해놓아도 어느 기기(Optimous LTE폰)에서는 다운받는데 시간이 걸리는 웹에 있는 mp3파일 재생 시 자동재생이 안되고 따로 꼭 재생버튼을 눌러주어야 재생이 되었다. 이 경우에는 setInterval 함수를 호출하여 2초 마다 일시정지, 재생버튼을 반복해서 누르고 재생시간(Current Time)이 변경되면 그 때 clearInterval 함수를 호출하여 Interval 함수 실행을 막아 자동 재생이 되도록 구현했다. 이 때 매우 주의할 점은 갤럭시S2 브라우저에서 mp3에 대한 현재 재생시간(Current Time)과 총 재생시간(Duration)에 대한 데이터를 제대로 가져올 수 없는 버퍼링 중 일 때 총 재생시간(Duration)이 1임으로 일시정지,재생을 할경우 바로 Audio컴포넌트의 End 이벤트가 발생하여 End 이벤트에 다음곡 재생이 구현되어 있는 경우 이상한 결과를 초래할 수도 있다. 따라서 이 경우는 Duration 시간이 1로 나오는 경우는 조건 처리해주어서 mp3 총 재생시간이 재대로 나온 후clearInterval 함수가 호출되어 계속 자동 재생되도록 구현 하였다
프로젝트 주소 : http://web2project.kr/sencha/applicaion/
프로젝트 코드(GitHub) : https://github.com/dbwhddn10/sencha_touch_webapp_4shared
프로젝트 사용자/개발자 가이드라인 : http://web2project.kr/sencha/application/guide.html