在h5页面上添加音乐播放

接到需求说要做一个h5轮播图，同时配上背景音乐。

Html部分：

<!--音乐开始-->

<div id="music">

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

<audio loop="loop" src="data: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 各种正常，写个博客压压惊。