【前端】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 ...
随机推荐
- Python OS模块操作文件和目录
#-*-coding:utf-8-*- import os import shutil ###############OS模块############## #获得当前python脚本的工作目录 os. ...
- 解题：POI 2007 Driving Exam
题面 有点意思的题 从一个位置$i$出发可以到达每一个位置即是从$1,n$出发可以到达$i$.然后有了一个做法:把图上下反转后建反图,这样就可以求从一个点$i$到达左右两侧的花费$dp[i][0/1] ...
- mysql 中的共享锁和排他锁
共享锁(share lock) 共享锁又称读锁,是读取操作创建的锁.其他用户可以并发读取数据,但任何事务都不能对数据进行修改(获取数据上的排他锁),直到已释放所有共享锁. 如果事务T对数据A加上共享锁 ...
- springboot中如何添加第三方的jar包或者说如何配置本地jar
首先推荐博客: spring-boot-maven-plugin 安装本地jar 包 http://www.cnblogs.com/acm-bingzi/p/mavenSpringBootPlugin ...
- vue2.0实战记录
1. 初始化项目vue init webpack caseone cd caseonecnpm installcnpm install less less-loader -Dcnpm install ...
- 页面缓存之Meta http-equiv属性详解
http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变 ...
- 搭建SVN+APACHE环境
项目需求 根据开发需求,建立svn环境,同时建立source.bd分支,source分支所有人都能访问,bd分支管理员kazihuo可访问.同时,在此基础上构建apache,以便于相关人员能通过浏览器 ...
- What Does “Neurons that Fire Together Wire Together” Mean?
What Does “Neurons that Fire Together Wire Together” Mean? I’ve heard the phrase “neurons that fire ...
- Maven项目中通过profile定义使不同环境使用不同配置信息
profile可以让我们定义一系列的配置信息,然后指定其激活条件.这样我们就可以定义多个profile,然后每个profile对应不同的激活条件和配置信息,从而达到不同环境使用不同配置信息的效果.比如 ...
- Minicap使用分析
想起前段时间研究过的minicap,抱着无果的心情再次看了源码,这次竟然比上次清晰了一点点,难道是因为这两天被android源码折磨得身心疲惫然而却在不知不觉中增长了?不懂怎么样,看懂了大概. Min ...