如果網站需要加入背景音樂,可以參照下面的代碼進行修改,注意代碼中需要引入的檔案:
//首頁背景音樂,隻需在頁面添加一個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