實作背景音樂的jquery代碼

如果網站需要加入背景音樂，可以參照下面的代碼進行修改，注意代碼中需要引入的檔案：

//首頁背景音樂，隻需在頁面添加一個id為jplayer的div元素即可。

    $("#jplayer").jPlayer({
        swfPath: "Jplayer.swf",    //播放器位址
        ready: function () {
            $(this).jPlayer("setMedia", {
                 mp3: "BeautifulLove.mp3"   //背景音樂檔案路徑
            });
             $(this).jPlayer('play');
         },
         supplied: "mp3"
      });


//以下代碼可以加多個歌曲，并且支援暫停
<img class="pull-right" id="bg_music_img" alt="背景音樂控制" style="margin:29px 0;" title="" src="" onclick="toggle()">
<div id="jplayer"></div>
<script src="jquery.jplayer.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var music_on=true;
    var musics=new Array();
    musics[]="安妮的仙境.mp3";
    musics[]="初雪.mp3";
    musics[]="但願如此.mp3";
    musics[]="回家.mp3";
    musics[]="加勒比海藍.mp3";
    musics[]="梁祝.mp3";
    musics[]="誓言.mp3";
    musics[]="天空之城.mp3";
    musics[]="童年.mp3";
    musics[]="雨中漫步.mp3";
    var index;
    var $jplayer;
    $(document).ready(function(){              
        //背景音樂
            $jplayer = $("#jplayer").jPlayer({
                swfPath: "Jplayer.swf",
                ready: function () {
                    toggle();
                },
                ended: function () {
                    $(this).jPlayer("play");
                },
                supplied: "mp3"
            });
    });

    function toggle(){
        if(music_on){//開啟
            $("#bg_music_img").attr({ src: "on.png", title: "關閉背景音樂" });
            //背景音樂
            index=Math.round(Math.random()*);
            $jplayer.jPlayer("setMedia", {
                        mp3:musics[index]
                    }).jPlayer('play');
            music_on=false;
        }else{//停止
            $("#bg_music_img").attr({ src: "off.png", title: "開啟背景音樂" });
            $("#jplayer").jPlayer("pause");
            music_on=true;
        }
    }   
</script>
           

代碼中引用的檔案點此下載下傳：http://download.csdn.net/download/qq_30152271/9087759