【前端】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 ...
随机推荐
- 【bzoj2780】 Sevenk Love Oimaster
http://www.lydsy.com/JudgeOnline/problem.php?id=2780 (题目链接) 题意 给出很多主串和很多询问串,求一个询问串在多少主串中出现过 Solution ...
- 解题：NOI 2014 动物园
题面 其实好像并不难,因为猫老师(应该是猫老师吧,还是LX大佬?)有一句话让我印象深刻:“包的(border)的包的还是包的”=.= 统计个数不就是统计长度么,然后根据上面那句话,当$nxt$长度大于 ...
- css基础--简单介绍css
--引入 什么是css? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解 ...
- Python【OS】模块
import osprint(os.getcwd())#取当前工作目录#os.chmod("day6-os模块.py",2)#给文件/目录加权限,对Windows的下面不好使(1. ...
- java基础-回调函数(callback)
java基础-回调函数(callback) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数 ...
- 安装SQL Sever数据库失败的解决办法
视频链接:https://www.bilibili.com/video/av12651739/ 我安装了SQL Sever2014.遇到了好多好多问题啊,整的我都快疯了.大致遇到的问题和解决办法如下. ...
- JavaApplet-Application Blocked..Your security setting have blocked an untrusted application from running..
From:http://www.cnblogs.com/killerlegend/p/3892668.html Author:KillerLegend Date:2014.8.5 在看A*算法的时候, ...
- Python中的变量引用对象需注意的几点
Python中的变量引用对象需注意的几点 分类:Python (55) (0) 普通引用: Python中,变量的作用仅仅是一个标识,只有赋值后才被创建,它可以引用任何类型的对象,而且在引用之前必须 ...
- Bzoj1939 [Croatian2010] Zuma
Time Limit: 4 Sec Memory Limit: 64 MBSubmit: 43 Solved: 31 Description 有一行 N 个弹子,每一个都有一个颜色.每次可以让超过 ...
- 【leetcode 简单】 第九十七题 快乐数
写一个程序,输出从 1 到 n 数字的字符串表示. 1. 如果 n 是3的倍数,输出“Fizz”: 2. 如果 n 是5的倍数,输出“Buzz”: 3.如果 n 同时是3和5的倍数,输出 “FizzB ...