在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 各种正常，写个博客压压惊。
