移动端微信自动播放音乐（含css动画暂停开始）

前言

做的H5大多需要音乐，其中音乐的样式都差不多，所以总结一份
音乐大多都有三点：旋转动画、自动播放、点击暂停开始

CSS旋转动画

我们要有一个基本的HTML代码以及对应的样式，例：

<div class="audio_icon audio_animation" data-mp3="0" style="z-index: 9;">
<audio id="main_audio" src="music/1.mp3" loop></audio>
</div>

/* 音乐图标旋转动画 */
@-webkit-keyframes audio_icon {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes audio_icon {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* 音乐图标 */
.audio_animation {
-webkit-animation: audio_icon 2s linear infinite;
animation: audio_icon 2s linear infinite;
}
.audio_icon {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 48px;
height: 48px;
background: url(./images/music.png) no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
/* 音乐结束 */

自动播放

这里分为两种，分别是加载的时候就自动播放，和预加载后自动播放（这里用的是preload.js）

微信里加载就自动播放

var audio = document.getElementById('main_audio');
function audioAutoPlay() {
/*audio.play();*/
document.addEventListener("WeixinJSBridgeReady", function() {
audio.play();
}, false);//在微信中使用音频和视频都需要进行这个监听。
}
audioAutoPlay();

预加载后自动播放

放在预加载中loadComplete函数里

var audio = document.getElementById('main_audio');
if(typeof WeixinJSBridge === 'object'){
WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
audio.play();
});
}else{
audio.play()
}

点击播放暂停

播放暂停的函数都是一样的，图标动画的播放暂停两种方法：加上或移除类以及css动画暂停开始

加上或移除类

优点：兼容性较高
缺点：重复渲染，暂停的时候动画回到默认样式，较生硬

$('.audio_icon').on('click', function() {
var data_mp3 = $(this).attr('data-mp3');
if(data_mp3 == 0) {
$(".audio_icon").removeClass("audio_animation")
$(".audio_icon").attr('data-mp3', '1');
audio.pause();
}
if(data_mp3 == 1) {
$(".audio_icon").addClass("audio_animation")
$(".audio_icon").attr('data-mp3', '0');
audio.play();
}
})

css动画暂停开始

优点：不需要重复渲染，动画暂停的位置是暂停时在的角度
缺点：低版本手机不兼容，比如iphoneSE

$('.audio_icon').on('click', function() {
var data_mp3 = $(this).attr('data-mp3');
if(data_mp3 == 0) {
$(".audio_icon").css("animation-play-state", "paused");
$(".audio_icon").css("-webkit-animation-play-state", "paused");
$(".audio_icon").attr('data-mp3', '1');
audio.pause();
}
if(data_mp3 == 1) {
$(".audio_icon").css("animation-play-state", "running");
$(".audio_icon").css("-webkit-animation-play-state", "running");
$(".audio_icon").attr('data-mp3', '0');
audio.play();
}
})

最后

以上就是大胆苗条为你收集整理的移动端微信自动播放音乐（含css动画暂停开始）的全部内容，希望文章能够帮你解决移动端微信自动播放音乐（含css动画暂停开始）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。