HTML5 Audio & Video for jQuery http://www.jplayer.org/

jplayer.md

##概述 平台和瀏覽器支援

• Windows: Chrome, Firefox, Internet Explorer, Safari, Opera
• Windows (legacy) 瀏覽器相容 IE6, IE7, IE8, IE9, IE10, IE11
• OSX: Safari, Firefox, Chrome, Opera
• iOS: Mobile Safari: iPad, iPhone, iPod Touch
• Android: Android 2.3 Browser
• Blackberry: OS 7 Phone Browser, PlayBook Browser

影音格式支援

• HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
• Flash: mp3, mp4 (AAC/H.264), rtmp, flv

##簡單快速版 ####使用說明 :

1. jquery_jplayer_1 為主要播放容器
2. jp_container_1 控制項 hook
3. jp-play, jp-pause 為開始、暫停 hook; 為在 cssSelector 設定

#####html

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1">
    <a href="javascript:;"class="jp-play">音樂開</a>
    <a href="javascript:;"class="jp-pause">音樂關</a>
</div>

#####Javascript

<script type="text/javascript">
  $(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer({
      ready: function () {
        $(this).jPlayer("setMedia", {
          title: "Bubble",
          mp3: "mp3/fileName.mp3"
        }).jPlayer("play"); // 自動播放
      },
      swfPath: "js/lib/jplayer/",
      ended: function() { // The $.jPlayer.event.ended event
          $(this).jPlayer("play"); // 結束時重播
      },
      // // 暫停時可綁定動作指令
      // pause: function() {
      //   $(".music_btn").animate({opacity: 0}, 300);
      // },
      supplied: "mp3"
    });
  });
</script>

####可搭配 jquery.cookie 紀錄聲音開關 jquery.cookie.js、jquery.cookie.js-中文解說、jquery.cookie.js cdn

範例 : http://www.dachetea.com/