【前端】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 ...
随机推荐
- 【BZOJ3884】上帝与集合的正确用法
Description 一句话题意,给定\(p\)作为模数: \(p\le 10^7\),数据组数\(T\le1000\). Solution 看到就弃疗了,再见...... 将模数\(p\)拆分成\ ...
- java-----遇到问题------myeclipse----发布项目到tomcat中lib文件夹没有子项目产生ClassNotFoundException错误
情况 myeclipse发布项目到tomcat中lib文件夹没有子项目产生ClassNotFoundException错误. 这种情况一般是 .classpath文件设置的输出路径不对导致的. 1.. ...
- Java之集合Collection
集合 初次学习集合过程中的学习笔记,学习顶层,使用底层.包括常用的API Collection接口 概述 集合 : 集合是Java中提供的一种容器,可以用来存储多个数据. 与数组的区别: 数组的长度是 ...
- NIN (Network In Network)
Network In Network 论文Network In Network(Min Lin, ICLR2014). 传统CNN使用的线性滤波器是一种广义线性模型(Generalized linea ...
- 闲:测试memcpy和std::copy vector之间拷贝
预测:底层C函数肯定比stl算法快 结果:少量数据底层快,大数据以上则stl对vector的处理可能更好 C/C++: #include <iostream> #include <v ...
- Chapter2（变量和基础类型）--C++Prime笔记
数据类型选择的准则: ①当明确知晓数值不可能为负时,选用无符号类型. ②使用int执行整数运算.在实际应用中,short常常显得太小而long一般和int有一样的尺寸.如果运算范围超过int的表示范围 ...
- openssl md5 sha256 rsa des
原文地址找不到了 #include <windows.h>#include <iostream>#include <cassert> #include <st ...
- Java基础-正则表达式(Regular Expression)语法规则简介
Java基础-正则表达式(Regular Expression)语法规则简介 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.正则表达式的概念 正则表达式(Regular Exp ...
- KVM管理概述
一.使用QEMU管理虚拟机 1.KVM指南 https://activedoc.opensuse.org/book/opensuse-virtualization-with-kvm/part-iii- ...
- 转：Block原理及引用循环问题
2010年WWDC发布iOS4时Apple对Objective-C进行了一次重要的升级:支持Block.说到底这东西就是闭包,其他高级语音例如Java和C++已有支持,第一次使用Block感觉满简单好 ...