오픈소스 오디오 플레이어 jPlayer

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>