【前端】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>
效果如下：
更多学习交流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');
【前端】h5音乐播放demo 可关闭可播放的更多相关文章
- 自制 h5 音乐播放器 可搜索
闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...
- 【H5 音乐播放实例】第一节 音乐详情页制作（1）
本教程是一个H5音乐播放的详情页制作,实现了H5音乐播放,音轨的跳动,已经较为酷炫的UI界面. 通过本教程,您会学到: 1.H5音乐播放 (带音轨) 2.iconfont字体图标库 3.div+css ...
- 微信中音乐播放在ios不能自动播放解决
在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...
- 如何使用AEditor制作一个简单的H5交互页demo
转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...
- iOS音频播放之AudioQueue(一)：播放本地音乐
AudioQueue简单介绍 AudioStreamer说明 AudioQueue具体解释 AudioQueue工作原理 AudioQueue主要接口 AudioQueueNewOutput Audi ...
- 关于web开发前端h5框架的选择
关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...
- 零基础如何迅速学习HTML5？新手小白学习web前端H5自白！
很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...
- html 音乐 QQ播放器 外链 代码 播放器 外链 代码
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha QQ播放器 外链 代码 播放器 外链 代码 ======== 歌曲链接 QQ播放器 外链 ...
- AVAudioPlayer播放并实现了后台播放和远程控制
// ViewController.h #import <UIKit/UIKit.h> #import <AVFoundation/AVFoundation.h> @class ...
随机推荐
- Merge Two Sorted Lists - LeetCode
目录 题目链接 注意点 解法 小结 题目链接 Merge Two Sorted Lists - LeetCode 注意点 两个链表长度可能不一致 解法 解法一:先比较两个链表长度一致的部分,多余的部分 ...
- 支付宝当面付功能demo运行解读
下载java版本的sdk的demo: 然后拷入idea中: 准备工作: (1)验签工具下载:蚂蚁金服上面下载: https://openclub.alipay.com/read.php?tid=955 ...
- Windows上虚拟环境的安装及使用
Why Install VirtualEnv? 可以方便的解决不同项目对类库的依赖问题. 可以在系统中Python解释器中避免包的混乱和版本的冲突. 为每个程序单独创建虚拟环境,可以保证程序只能访 ...
- django中的认证与登录
认证登录 django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1 authenticate(**credentials) 提供了用户认证,即验证用户名以及密码是否 ...
- 总结： 《jQuery基础教程》 5-完结
第5章:操作DOM HTML属性和DOM属性:attr()和prop() 获取表单控件的值:val() DOM操作方法的归纳: (1) 要在HTML中创建新元素,使用$()函数.(2) 要在每个匹配的 ...
- ORM choice字段 如何在页面上显示值
核心:obj.get_字段名_display 1.定义module 数据结构: class msg(models.Model): choice = ( (1, '技术部'), (2, '行政'), ( ...
- Composer 自动加载（autoload）机制
自动加载的类型 总体来说 composer 提供了几种自动加载类型 classmap psr-0 psr-4 files 这几种自动加载都会用到,理论上来说,项目代码用 psr-4 自动加载, hel ...
- Document对象中的一些重要的属性和方法(笔记)
Document对象:每一个web浏览器窗口.标签页和框架由一个window对象所表示.每个window对象都有一个document属性引用的是Document对象,它是一个巨大的API中的核心对象, ...
- soj1046. Plane Spotting
1046. Plane Spotting Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description Craig is fond o ...
- TED_Topic6：How to raise a black son in America
By Clint Smith As kids, we all get advice from parents and teachers that seems strange, even confusi ...