웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Jquery 를 이용한 Audio 플레이어 입니다. 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] Jquery 를 이용한 Audio 플레이어 입니다.

해피CGI윤실장 2017. 4. 6. 09:37
HTML 과 JAVASCRIPT 의 JQUERY 를 이용하여 MP3 플레이어를 만든 샘플 입니다. 
 
라이센스 : The MIT License



사용 방법은 매우 간단 합니다. 
 
다운로드 받으신 압축 파일을 해제하여 하신 후 폴더에 접근하시면 index.html 파일을 엽니다. 



위의 data-src 속성의 값이 mp3 파일명입니다. 
songs 폴더에 mp3 파일을 지정했지만 샘플 코드에 보시면 songs 가 없습니다.
songs 폴더를 만드셔도 되고 다른 폴더를 지정하셔도 됩니다. 
 


audioInitialVolume 는 기본 볼륨 값을 설정하시면 됩니다.

backgroundBanners 는 mp3 파일을 재생할때 보여지는 이미지 입니다.
배열 형식으로 되어 있습니다. 형식을 유지한채 사용하시면 됩니다. 
  

몇가지 아쉬운점이 있는데요.
mp3 파일 리스트가 터치 슬라이드 였으면 좋았겠다.
앨범 이미지 나오는 곳도 자동 슬라이드가 되었으면 mp3 플레이어 뿐만 아닌 ... 개인의 앨범형식으로 사용해도 괜찮았을듯 합니다.
당연히 플레이어바 재생버튼들도 모두 감춰야 겠지요 ^^

자료출처 : http://www.htmldrive.net/items/show/1786/-Simple-lightweight-jQuery-plugin-with-AudioControls

 

홈페이지바로가기 

저작자표시

'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글

[해피CGI][cgimall] CKEditor 플러그인 Countdown Timers  (0) 2017.04.10
[해피CGI][cgimall] Jquery를 이용한 드랍메뉴  (0) 2017.04.07
[해피CGI][cgimall] 슬라이드형의 가격 범위검색을 할 수 있는 JQuery UI 소스  (0) 2017.04.05
[해피CGI][cgimall] JQuery를 이용한 Progressbar(진행표시줄) 만들기  (0) 2017.04.04
[해피CGI][cgimall] CKEditor 플러그인 Floating-Tools  (0) 2017.04.03
공유하기 링크
'웹프로그램밍 자료실/JAVA 자료' Related Articles more
Comments