js給html設定背景音樂,最簡單最快的方法給H5頁面添加背景音樂播放（css樣式美化）...

看了很多場景應用，右上角總是會有一個音頻按鈕，會播放音樂，現在通過簡單幾步就可以實作這個功能。

1.先上基礎的html，定位用了fixed(source 标簽裡面對應的音頻連結換為自己的音頻連接配接)

2.添加css進行美化

*{margin:0px;padding:0px;}

body{background:#000;}

@-webkit-keyframes reverseRotataZ{

0%{-webkit-transform: rotateZ(0deg);}

100%{-webkit-transform: rotateZ(-360deg);}

}

@-webkit-keyframes rotataZ{

0%{-webkit-transform: rotateZ(0deg);}

100%{-webkit-transform: rotateZ(360deg);}

}

#musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}

#musicControl a { display:inline-block;width: 25px; height: 25px;overflow:hidden;background:url('./images/mcbg.png') no-repeat;background-size:100%;}

#musicControl a audio{width:100%;height:56px;}

#musicControl a.stop { background-position:left bottom;}

#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}

#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}

這裡的css裡面有個背景圖，是個旋轉的按鈕，點選這裡下載下傳mcbg.png

3.添加JS(之前不要忘 )

function play_music(){

if(music.paused){

music.play();

$('#mc_play').attr('class','on');

}else{

music.pause();

$('#mc_play').attr('class','stop');

}

}

這個時候基本就已經OK了，最後來一張效果圖吧

喜歡 (10)or分享 (0)