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

<!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. 【hdu3555】 Bomb

    http://acm.hdu.edu.cn/showproblem.php?pid=3555 (题目链接) 题意 求区间${[1,n]}$含有49的数的个数. Solution 数位dp,先求出不含4 ...

  2. Windows Shell远程执行代码漏洞(（CVE-2018-8414）复现

    0x00   SettingContent-ms文件介绍 .SettingContent-ms是在Windows 10中引入的一种文件类型,它的内容是XML格式进行编写的,主要用于创建Windows设 ...

  3. 《Linux内核设计与实现》第17章读书笔记

    第十七章  设备与模块 一.四种内核成分 设备类型:在所有 Unix 系统中为了统一普通设备的操作所采用的分类． 模块: Linux 内核中用于按需加载和卸载目标码的机制． 内核对象:内核数据结构中支 ...

  4. DataTables实现rowspan思路

    直接看例子吧 <table id="example" class="display table table-bordered" cellspacing=& ...

  5. 【数学】【P5150】 生日礼物

    Description 给定 \(n\),求 \[\sum_{i}~\sum_j~[lcm(i,j)~=~n]\] input 一行一个整数代表 \(n\) Output 一行一个整数代表答案 Hin ...

  6. MVC中HTML控件设为只读readonly

    http://www.th7.cn/web/html-css/201501/78934.shtml 1.下拉框设为只读试了试用这个有效: @Html.DropDownListFor(model =&g ...

  7. Java基础-IO流对象之序列化（ObjectOutputStream）与反序列化（ObjectInputStream）

    Java基础-IO流对象之序列化(ObjectOutputStream)与反序列化(ObjectInputStream) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.对象的序 ...

  8. day21 数据库（DataBase）

    1.数据库由多张表组成,一张表就是一个实体. 2.表的列就是属性的值,行就是一个个具体的对象的属性值. primary key主键:1.非空.2.不能修改(定好不变).3.业务无关. 作用:在表中具体 ...

  9. Java并发编程原理与实战二十七：循环栅栏:CyclicBarrier

    昨天我们学习了倒计数功能的等待,今天我们学习的是循环栅栏:CyclicBarrier.下面我们就开始吧: 1.CyclicBarrier简介CyclicBarrier,是JDK1.5的java.uti ...

  10. 【AtCoder】ARC095 E - Symmetric Grid 模拟

    [题目]E - Symmetric Grid [题意]给定n*m的小写字母矩阵,求是否能通过若干行互换和列互换使得矩阵中心对称.n,m<=12. [算法]模拟 [题解]首先行列操作独立,如果已确 ...