【前端】h5音乐播放demo 可关闭可播放

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

<!DOCTYPE html>

<html>

<head>

<title>music</title>

/*音乐*/

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>

</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');

转载于:https://www.cnblogs.com/xiaohuizhang/p/8624308.html

【前端】h5音乐播放demo 可关闭可播放相关推荐

模拟网易云的H5音乐播放器
转发我在github发布的一个H5音乐播放器 H5MusicPlayer GitHub链接欢迎Fork & Star. 前言这是我第一个GitHub项目,之前一直想在GitHub写点东西, ...
示例演示公告通知标题无缝向上滚动，文字段落无缝向上滚动，简单的wangeditor富文本编辑器，简单的音乐播放demo...
用于工作需求接触了公告通知标题内容的无缝向上滚动功能以及使用简单的wang富文本编辑器配置简单的音乐插件demo. 在写之前要先引入相应的js,jquery: 首先是通知标题的无缝向上滚动,这个网上很 ...
EasyCVR前端关闭播放器，后端websocket播放链接依然存在是什么原因？
EasyCVR平台可支持的主流标准协议有国标GB28181.RTSP/Onvif.RTMP等,以及厂家私有协议与SDK接入,包括海康Ehome.海康SDK.大华SDK等,能对外分发RTSP.RTMP. ...
H5音乐播放器（包含源码与示例）
H5音乐播放器(包含源码与示例) 基于Angular+ionic的H5音乐播放器,源码:https://gitee.com/CrimsonHu/h5-music-player 示例地址建议使用原版c ...
EasyNVR H5无插件摄像机直播解决方案前端解析之：引用videojs无法自动播放
EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放参考文章: (1)EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放 (2) ...
H5音乐播放器登陆界面源码：
H5音乐播放器登陆界面源码: css代码如下: *{margin:0;padding:0; } .mr-cont{width:715px;margin:0 auto;border:1px solid ...
最新依米花H5音乐播放器系统源码+Thinkphp内核
正文: 最新依米花H5音乐播放器系统源码+Thinkphp内核,源码0加密,如果无法发送邮箱和短信啥的,就是你没配置好,自己去检查. 安装环境: 国内外服务器都可以用主机无法运行需求环境 php7 ...
音乐在线播放Demo
本事例的界面很简单,一个按钮用来开始缓冲音乐,一个进度条用来显示音乐的缓冲进度和播放进度,后面是一个文本用来显示音乐的播放时间,还有一个图片按钮用来播放和暂停音乐. 在main.xml中的代码如下: ...
h5 默认为移动端页面_20条移动前端H5页面开发规范，h5开发必看文档
这是根据腾讯最新公布的<移动页面用户行为报告>来给大家分享的关于移动端H5页面开发一些20条规范和准则.里面大概包含了16种用户操作习惯和注意点. 下面25学堂跟大家先分享一张关于2016 ...

【前端】h5音乐播放demo 可关闭可播放

【前端】h5音乐播放demo 可关闭可播放相关推荐

最新文章

热门文章