前言
最近在做一个移动端项目，需要为H5配一段背景音乐且要自动播放，按照以往的方法将自动播放代码加入进去就可以了，可以却发生了点小插曲（捂脸），下面话不多说了，来一起看看详细的介绍吧。
移动端音频播放代码
css
.pause { position: absolute; z-index: 10000; bottom: 10px; right: 10px;}
.pause a { width:30px; height:30px; background:url(http://www.easck.com/zj/maxbao/reai/imgs/units-icons.png) 0 0 no-repeat; display:block; background-size: 90px auto;}
.pause a.on { -webkit-animation:reverseRotataZ 1.2s linear infinite}
.pause a.off { }
.pause span{ color: #fff; font-size: 16px; position:absolute; left:-40px; top:5px; text-shadow:1px 1px 1px #000; letter-spacing:2px; -webkit-transition:all .2s linear; opacity:0; -webkit-transform:translateX(-20px) }
.pause span.z-show { opacity:1; -webkit-transform:translateX(0px)}
.coffee-steam-box { -webkit-transform:translate(-40px,-40px)}
@-webkit-keyframes reverseRotataZ {
0% {
-webkit-transform:rotateZ(0deg)
}
100% {
-webkit-transform:rotateZ(-360deg)
}
}
.audio{position: absolute; z-index:10; visibility: hidden; opacity: 0; left: 0px; top:0px; width: 100px ; height: 30px;}
html
<div class="pause">
<a class="on" href="#" rel="external nofollow" >
</a>
<span>开启</span>
</div>
<div class="audio">
<audio src="http://www.easck.com/ln/images/2016zt/12Dec/dlsdbm/music.mp3" controls="controls" preload="auto" autoplay="autoplay" id="audio" loop></audio>
</div>
javascript
//播放器
(function($) {
$(document).ready(function() {
var musicControl = function(obj){
var classname = $.trim(obj.attr('class'));
//alert(classname);
if (classname == 'on')
{
document.getElementById('audio').pause();
obj.removeClass('on').addClass('off');
obj.siblings('span').text('关闭');
$('.pause span').addClass('z-show');
$('.music-icon').removeClass('active');
setTimeout(function(){
$('.pause span').removeClass('z-show');
},500);
} else if (classname == 'off')
{
document.getElementById('audio').play();
obj.removeClass('off').addClass('on');
obj.siblings('span').text('开启');
$('.music-icon').addClass('active');
$('.pause span').addClass('z-show');
setTimeout(function(){
$('.pause span').removeClass('z-show');
},500);
};
return false;
}
$('.pause a').click(function ()
{
musicControl($(this));
});
var audio = document.getElementById('audio');
audio.play();
$(document).one("touchstart",
function() {
audio.play()
})
});
})(jQuery);
