p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 13.0px "Helvetica Neue" }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 13.0px "Helvetica Neue"; min-height: 15.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 13.0px "Helvetica Neue"; color: #00a2ff }
span.s1 { color: #00a2ff }
span.s2 { color: #000000 }
复制如下代码，直接可预览（记得把超链接换成自己本地路径）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>music</title>
<!--jq类似文件需要-->
<script src="../../../static/js/common/zepto.min.2.js"></script>
<style type="text/css">
/*音乐*/
audio {
display: inline;
float: left;
}
.music:active {
text-decoration: none;
}
.music {
width: 2.5rem;
height: 2.5rem;
text-align: center;
/*line-height: 80px;*/
background: url(https://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/images/common/off.png);
background-size: 100%;
position: absolute;
top: 1.6rem;
right: 1rem;
float: left;
z-index: 10000;
border-radius: 50%;
}
.music-off {
background: url(https://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/images/common/on.png);
background-size: 100% 100%;
}
.music-ani {
animation: musicRound 1s infinite linear;
-webkit-animation: musicRound 1s infinite linear;
}
@keyframes musicRound {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes musicRound {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
}
}
.disn {
display: none;
}
</style>
</head>
<body>
<!--music-->
<div class="music music-ani"></div>
<audio id="audio01" src="http://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/active_common/reliable_art/reliable_art.mp3" loop="loop"></audio>
<!--end-->
<!--music文件放尾部，负责播放有影响-->
<script src="https://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/js/common/music.js"></script>
<!--苹果系统播放兼容问题需要引入-->
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</body>
</html>
效果如下：
更多学习交流qq：844271163
music.js文件内容
$(‘audio‘).get(0).play();$(‘.music‘).addClass(‘on music-off‘);$(‘.music‘).on(‘click‘,function(){if($(this).hasClass(‘on‘)){$(‘audio‘).get(0).pause();$(this).removeClass(‘on music-off‘);$(this).removeClass(‘music-ani‘)}else{$(‘audio‘).get(0).play();$(this).addClass(‘on music-off‘);$(this).addClass(‘music-ani‘)}});var timerHide;function audioAutoPlay(id){var audio=document.getElementById(id);audio.play();document.addEventListener("WeixinJSBridgeReady",function(){audio.play()},false)}audioAutoPlay(‘audio01‘);
原文地址：https://www.cnblogs.com/xiaohuizhang/p/8624308.html