在h5頁面上添加音樂播放

接到需求說要作一個h5輪播圖，同時配上背景音樂。

Html部分：

<!--音樂開始-->

<div id="music">

<div id="audio-btn" class="on" onclick="music.changeClass(this,'media')">

<audio loop="loop" src="images/SeeYouAgain.mp3" id="media" preload="preload"></audio>

</div>

</div>

<!--音樂結束-->

 

Css部分：

#music #audio-btn {

width: 44px;

height: 44px;

position: fixed;

z-index: 1000;

top: 30px;

left: 30px;

}

#music .on { 

background: url('../images/music_on.png') no-repeat 0 0; 

-webkit-animation: rotating 1.2s linear infinite; 

animation: rotating 1.2s linear infinite;

}

 

#music .off {

background: url('../images/music_off.png') no-repeat 0 0;

}

  

@-webkit-keyframes rotating { 

from { 

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotating { 

from { 

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

 

to {

-webkit-transform: rotate(360deg); 

-moz-transform: rotate(360deg); 

-ms-transform: rotate(360deg); 

-o-transform: rotate(360deg); 

transform: rotate(360deg); 

}

}

 

JS 部分：

 

var music = {

changeClass: function(target, id) {

var className = $(target).attr('class');

var ids = document.getElementById(id);

(className == 'on') ?

$(target).removeClass('on').addClass('off'): $(target).removeClass('off').addClass('on');

(className == 'on') ?

ids.pause(): ids.play();

},

play: function() {

var media = document.getElementById('media');

media.src = "images/SeeYouAgain.mp3";

media.play();

//document.getElementById("audio-btn").click(changeClass(this,'media'));

document.addEventListener("WeixinJSBridgeReady", function() {

var audioPlayer = document.querySelector('audio#media');

if(audioPlayer.paused) {

music.changeClass($(".off"), 'media')

}

media.play();

}, false);

}

}

music.play();

 

var audioPlayer = document.querySelector('audio#media');

if(audioPlayer.paused) {

music.changeClass($(".on"), 'media')

}

 

 

遇到的問題：

（1）安卓手機正常，蘋果手機微信不能播放：

添加微信監聽事件：

document.addEventListener("WeixinJSBridgeReady", function() {

media.play();

)}

 

（2）微信正常，蘋果ipad上的qq不能播放

這個在各類百度後發現，仍是不能播放，因此咱們對播放器進行判斷，更換停播樣式：

 

var audioPlayer = document.querySelector('audio#media');

if(audioPlayer.paused) {

music.changeClass($(".on"), 'media')

}

 

（3）qq好了，微信出現樣式是停播，可是實際在播放，因此把判斷也要賦值到，監聽後的方法中。

 

ok 各類正常，寫個博客壓壓驚。