【前端】h5音乐播放demo 可关闭可播放

复制如下代码,直接可预览(记得把超链接换成自己本地路径)

<!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>

效果如下:

【前端】h5音乐播放demo 可关闭可播放

更多学习交流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');

上一篇:Oracle RAC环境下定位并杀掉最终阻塞的会话-续


下一篇:LeetCode OJ:Remove Duplicates from Sorted List II(链表去重II)