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

<!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 可关闭可播放的更多相关文章

  1. 自制 h5 音乐播放器 可搜索

    闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...

  2. 【H5 音乐播放实例】第一节 音乐详情页制作（1）

    本教程是一个H5音乐播放的详情页制作,实现了H5音乐播放,音轨的跳动,已经较为酷炫的UI界面. 通过本教程,您会学到: 1.H5音乐播放 (带音轨) 2.iconfont字体图标库 3.div+css ...

  3. 微信中音乐播放在ios不能自动播放解决

    在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...

  4. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...

  5. iOS音频播放之AudioQueue(一)：播放本地音乐

    AudioQueue简单介绍 AudioStreamer说明 AudioQueue具体解释 AudioQueue工作原理 AudioQueue主要接口 AudioQueueNewOutput Audi ...

  6. 关于web开发前端h5框架的选择

    关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

  7. 零基础如何迅速学习HTML5？新手小白学习web前端H5自白！

    很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...

  8. html 音乐 QQ播放器 外链 代码 播放器 外链 代码

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha QQ播放器 外链 代码 播放器 外链 代码 ======== 歌曲链接 QQ播放器 外链 ...

  9. AVAudioPlayer播放并实现了后台播放和远程控制

    // ViewController.h #import <UIKit/UIKit.h> #import <AVFoundation/AVFoundation.h> @class ...

随机推荐

  1. linux内核分析 第七周 Linux内核如何装载和启动一个可执行程序

    一.编译链接的过程和ELF可执行文件格式 vi hello.c gcc -E -o hello.cpp hello.c -m32 //预处理.c文件,预处理包括把include的文件包含进来以及宏替换 ...

  2. activity 与 service 之间的通信

    activity和service通信:通过binder 举个我实际项目中的例子:在service中下载更新应用 首先是下载更新apk的service: public class UpdateVersi ...

  3. > Manifest merger failed with multiple errors, see logs -- Android Studio问题汇总

    FAQ:> Manifest merger failed with multiple errors, see logs 解决: 此问题产生原因大概有三个 # 第一,清单文件有错,这种错不会在编译 ...

  4. bzoj4035【HAOI2015】数组游戏

    题目描述 有一个长度为N的数组,甲乙两人在上面进行这样一个游戏:首先,数组上有一些格子是白的,有一些是黑的.然 后两人轮流进行操作.每次操作选择一个白色的格子,假设它的下标为x.接着,选择一个大小在1 ...

  5. Java入门：练习——自定义通用工具类

    请编写一个通用工具类,该类具有如下功能: 1)判断一个字符串是否是邮箱地址 2)判断一个字符串是否是手机号码 3)判断一个字符串是否是电话号码 4)判断一个字符串是否是IP地址 代码结构如下,请补充完 ...

  6. Windows上虚拟环境的安装及使用

    Why Install VirtualEnv? 可以方便的解决不同项目对类库的依赖问题. 可以在系统中Python解释器中避免包的混乱和版本的冲突.   为每个程序单独创建虚拟环境,可以保证程序只能访 ...

  7. python线程进程

    多道技术: 多道程序设计技术 所谓多道程序设计技术,就是指允许多个程序同时进入内存并运行.即同时把多个程序放入内存,并允许它们交替在CPU中运行,它们共享系统中的各种硬.软件资源.当一道程序因I/O请 ...

  8. P1099 树网的核 && P2491 [SDOI2011]消防

    给定一棵树, 你可以在树的直径上确定一条长度不超过 \(S\) 的链, 使得树上离此链最长的点距离最小, 输出这个距离 P2491 数据范围为 P1099 的 \(1000\) 倍 Solution ...

  9. P4779 【模板】单源最短路径（标准版）

    P4779 [模板]单源最短路径(标准版) 求单源最短路, 输出距离 Solution \(nlogn\) 堆优化 \(Djs\) Code #include<iostream> #inc ...

  10. 设置PyCharm中的Python代码模版

    再MacOs运行的PyCharm中,执行python文件,如果不指定python文件字符编码会报错: SyntaxError: Non-ASCII character , but no encodin ...