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

<!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. bzoj1683[Usaco2005 Nov]City skyline 城市地平线

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1683 Input 第1行:2个用空格隔开的整数N和W. 第2到N+1行:每行包括2个用空格 ...

  2. WinForm查询大数据界面假死,使用异步调用解决

    用DataGridView无分页绑定一个几千条数据的查询,查询的时候界面直接卡死十几秒,用户体验非常不好,因此用异步操作解决界面卡死的问题原本场景:点击[查询]后,界面直接卡死优化场景:点击[查询]后 ...

  3. 利用Array Prototype的方法来实现对dom集合的筛选、indexOf、map等功能

    <!DOCTYPE html><html> <head> <title>TODO supply a title</title> <me ...

  4. BZOJ 1497 [NOI2006]最大获利

    1497: [NOI2006]最大获利 Description 新的技术正冲击着手机通讯市场,对于各大运营商来说,这既是机遇,更是挑战.THU集团旗下的CS&T通讯公司在新一代通讯技术血战的前 ...

  5. Webpack 配置示例

    Webpack 作为前端构建工具,对于大型网站开发,大大提升了开发效率.要使用webpack需要先安装webpack工具: 先来看一个最简单的命令 $ webpack main.js bundle.j ...

  6. opencv 启动摄像头 C++

    http://blog.csdn.net/thefutureisour/article/details/7530177 在网上看了许多关于OpenCV启动摄像头的资料,但是,都是基于C语言的,代码又臭 ...

  7. 小议主子表INT自增主键插入记录的方法SQL server]教程

    http://www.chinesejy.com/jishu/508/519/2006061781665.html 主子表最常见的大概就是用在进销存.MRP.ERP里面,比如一张销售订单,订单Orde ...

  8. ab输出信息解释以及Failed requests原因分析

    ab是apache自带的压力测试工具.ab进行的一切测试本质上是基于HTTP的.下面是对ab输出项信息的解释和出现Failed requests原因分析.测试实例:1. ab输出信息说明:   1 2 ...

  9. 使用 mysql-proxy 监听 mysql 查询

    什么是 mysql-proxy? mysql-proxy是mysql官方提供的mysql中间件服务,上游可接入若干个mysql-client,后端可连接若干个mysql-server. 它使用mysq ...

  10. Laravel 返回 JSON 格式

    第一种方法: 第一步.编写 BaseRequest首先我们需要构建一个 BaseRequest 来重写 Illuminate\Http\Request ,修改为默认优先使用 JSON 响应: app/ ...