jPlayer(1) - 설치 및 기본 설정

[황정식]

: jQuery로 된 오디오 플러그인을 찾다가 괜찮은 오디오/비디오 플레이어를 찾은것 같아서 소개하고자 한다. jQuery로 만들었다면 크로스브라우징이 지원될꺼라고 생각했었는데 모바일 웹에서도 정상적으로 작동이 된다고 하니 생각보다 괜찮은 플러그인을 찾은것 같다. 

현재는 내가 생각하는 로직에 맞게 하나의 오디오 파일을 실행하고, 다음 버튼을 누르면 그다음 파일이 플레이어에 등록되어 실행할 수 있도록만 구현해두었는데 조금 더 시간을 내서 일반적인 오디오 플레이어의 기능을 다양하게 할 수 있도록 구현을 해보아야겠다.

설치 방법을 간단하게 살펴보자 jQuery 플러그인이 대부분 그렇듯이 설치는 플러그인을 다운로드 받고, 플러그인이 사용되는 페이지에 jQuery Core 파일 하단에 링크를 추가해주면 된다.

다운로드는 아래 사이트에서 하면 된다.

http://www.jplayer.org/download/

다운로드는 데모 파일을 다운로드 받으면 된다. 

다운로드를 받은후에 압축을 풀게되면 js, skin 디렉토리 보일텐데 기본적으로 필요한 파일은 아래 이미지와 같다.

--> 내 경우에는 jQuery Core와 jQuery UI를 같이 사용하고 있는 관계로 jQuery 관련된 파일들은 모두 jquery 라는 디렉토리 하위에다가 두었다. jPlayer의 jplayer라는 디렉토리 하위에 스킨 파일과 jpalyer.swf 파일, jquery.jplayer.min.js 파일을 위치시켰다.

다음으로 css 파일을 페이지에 추가한다.

==== header.jsp ====

<link rel="stylesheet" href="/jquery/themes/base/jquery.ui.all.css">

<link rel="stylesheet" href="/jquery/jplayer/skin/blue.monday/jplayer.blue.monday.css">

<link rel="stylesheet" href="/css/common/jquery.dialog.override.css">

다음으로 jquery.jplayer.min.js 파일을 추가한다.

==== footer.jsp ====

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

  <div class="footer">

    <img src="/images/footer_logo.png" width="88" height="26" alt="EC global 하단 로고"> <img src="/images/copy.png" width="227" height="26" alt="ⓒ 2010 ECGLOBAL. ALL RIGHTS RESERVED.">   

     </div>

  </div>

    <script type="text/xxjavascript" src="/jquery/jquery-1.7.1.js"></script>

<script type="text/xxjavascript" src="/jquery/ui/jquery-ui-1.8.17.custom.js"></script>

<script type="text/xxjavascript" src="/jquery/jplayer/jquery.jplayer.min.js"></script>

<script type="text/xxjavascript" src="/js/plugin/jquery.ecglobal.js"></script>

<script type="text/xxjavascript" src="/js/common_jquery.js"></script>

</body>

--> jQuery Core 파일 하단에 위치 시키면 된다.

설정은 이제 끝이 났고, 코드를 한번 만들어보자. 먼저 오디오 플레이어를 화면에 표시하기위해서 매뉴얼에 있는 코드를 그대로 보여주고자하는 jsp 페이지에 복사해서 붙여넣었다.

==== jplayer.jsp ====

================================ 오디오 ===============================<br/>

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

<div id="jp_container_1" class="jp-audio">

   <div class="jp-type-single">

     <div class="jp-gui jp-interface">

       <ul class="jp-controls">

         <li><a href="xxjavascript:;" class="jp-play" tabindex="1">play</a></li>

         <li><a href="xxjavascript:;" class="jp-pause" tabindex="1">pause</a></li>

         <li><a href="xxjavascript:;" class="jp-stop" tabindex="1">stop</a></li>

         <li><a href="xxjavascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>

         <li><a href="xxjavascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>

         <li><a href="xxjavascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>

       </ul>

       <div class="jp-progress">

         <div class="jp-seek-bar">

           <div class="jp-play-bar"></div>

         </div>

       </div>

       <div class="jp-volume-bar">

         <div class="jp-volume-bar-value"></div>

       </div>

       <div class="jp-time-holder">

         <div class="jp-current-time"></div>

         <div class="jp-duration"></div>

         <ul class="jp-toggles">

           <li><a href="xxjavascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>

           <li><a href="xxjavascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>

         </ul>

       </div>

     </div>

     <div class="jp-title">

       <ul>

         <li>Bubble</li>

       </ul>

     </div>

     <div class="jp-no-solution">

       <span>Update Required</span>

       To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.

     </div>

   </div>

</div>

================================ 오디오 ===============================<br/><br/>

-->위 코드의 구체적인 내용은 몰라도 우선은 이렇게 갖다 붙여넣는다. 사실 구체적으로 알 필요도 없을것 같다. 이 상태에서 페이지를 로딩하면 오디오 플레이어의 외양은 보이겠지만 아직 실행은 되지 않는다. 이제 오디오를 실행시킬 코드를 추가해보자.

==== jplayer.js ====

       // 초기 로딩시 첫번째 파일의 파일 경로와 파일명을 변수에 담아둔다.

if($(".questionWrapper").size() > 0)

{

filePath = $(".questionWrapper:visible").children(".filePath").val();

fileName = $(".questionWrapper:visible").children(".fileName").val();

}        

       /**

* 오디오 주크박스를 화면에 표시한다.

* 

* 초기 로딩시 첫번째 오디오 파일을 setMedia 속성에 설정한다.

*/

$("#jquery_jplayer_1").jPlayer({

        ready: function () {                            

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

            mp3: "/audio" + filePath + fileName

          });

        },

        swfPath: "/jquery/jplayer",

        supplied: "mp3, wav, m4a, oga"

     });

--> 위의 선택자는 오디오 플레이어 html 코드를 복사해서 갖다 붙일때 제일 상단에 있던 div의 id 속성 값과 일치해야한다.

--> jPlayer 매뉴얼에 다양한 옵션 기능들이 있는데 그 기능들을 모두 살펴보기에는 시간이 충분하지가 않았다.

--> 위에서는 우선 3가지 옵션만 적용했다.

--> ready 옵션은 페이지가 로딩될때 옵션값으로 콜백 함수를 호출한다. 콜백함수에서는 setMedia 메서드를 호출해서 실행시킬 파일의 타입과, 위치를 설정해준다.

--> swfPath 옵션은 jplayer.swf 파일의 경로이다. 우리가 위해서 설치 및 설정을 할때 위치시킨 경로를 적어주면 된다.

--> supplied 옵션은 jplayer가 지원하는 미디어 타입을 설정하는것이다. m4a와 oga 타입은 모바일에서 적용가능한 타입이며 내 경우에는 mp3, wav 타입이 필요했기에 함께 설정했다.

처음 페이지가 로딩 되었을때에 첫번째 오디오 파일이 플레이어에 설정이 된다. 그리고 다음 버튼을 눌렀을때 다음 오디로 파일을 플레이어에 설정해서 준비상태가 되도록해야 했는데 이럴 경우 위에서 사용했던 setMedia 메서드를 이용해서 다음곡을 설정하면 된다.

$("#btnCheckAnswer").click(function(){

    // 다음문제의 오디오 파일을 setMedia 옵션에 설정한다.

   $("#jquery_jplayer_1").jPlayer("setMedia", {

        mp3: "/audio" + filePathNext + fileNameNext

    });

}

그리고, 마지막 오디오 파일을 실행시킨후에 다음 페이지로 이동하기전 오디오를 끄는 설정이 필요했다. 오디오를 끄고 싶으면

stop 메서드를 호출하면 된다.

// 오디오를 끈다.

$("#jquery_jplayer_1").jPlayer("stop");

현재까지는 이 정도 기능만이 필요해서 사용을 하고 있는 상태이지만 시간이 되면 곰오디오와 같은 쥬크박스로 사용을 할 수 있도록 더 많은 기능들을 알아볼 수 있었으면 한다...