jQuery HTML5 Audio / Video Library



jPlayer는 커스터마이징이 가능한 오디오 플레이어


배포사이트 : http://jplayer.org/




script

$("#jquery_jplayer_1").jPlayer({

   ready: function () {

      $(this).jPlayer("setMedia", {

         m4a: "/resource/tts_10.mp3"    //음원 경로

      });

   },

   play: function() { // To avoid multiple jPlayers playing together.

      $(this).jPlayer("pauseOthers");

   },

   swfPath: "/resource/script/jplayer",    //jplayer 경로

   supplied: "m4a",

   cssSelectorAncestor: "#jp_container_1",

   wmode: "window",

   globalVolume: true,

   useStateClassSkin: true,

   autoBlur: false,

   smoothPlayBar: true,

   keyEnabled: true,

   defaultPlaybackRate : .5     //배속. 디폴트 1

});




html

<div class="player">


   <div id="jquery_jplayer_1" class="jp-jplayer"></div>


   <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">


      <div class="jp-controls">

         <button class="jp-play" role="button" tabindex="0">play</button>

         <button class="jp-pause" role="button">Pause</button>

         <button class="jp-stop" role="button">Stop</button>

      </div>


   </div>


</div>


디자인 모음 사이트를 찾았당! 아이콘부터 템플릿까지 없는게 없다.

저작권은 컨텐츠마다 각각 다르기 때문에 사용 전 해당 컨텐츠 페이지 또는 해당 사이트에서 확인해야한다.



소스트리 : http://sourcetree.kr


1. 우측 메뉴에서 찾는 종류를 선택하고 원하는 리스트를 Click



2. 팝업에서 빨간박스를 누르고 들어간 페이지에서 다운로드 받으면 된다.

' > etc.' 카테고리의 다른 글

ICO 파일 변환  (0) 2018.05.10
유튜브 동영상 퍼오기  (0) 2018.03.20
소스트리 무료 디자인 모음 사이트  (0) 2018.02.13
간단한 웹 폰트 변환 사이트  (0) 2017.11.14

커스텀 스크롤바를 만들어주는 플러그인


배포사이트 : http://manos.malihu.gr/jquery-custom-content-scroller/

데모 : http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html




+ Recent posts