h5 中MP3 播放暂停 jq
<!--音乐-->
<div id="music">
<img src="../img/music.gif" class="m" />
<img src="../img/music_off.png" class="off" />
<!--<audio src="../mp3/bgmusic.mp3" loop="loop" preload="auto" autoplay="autoplay" class="bgmusic">你的浏览器不支持audio标签。</audio>-->
</div>
<!--end-->
#music {
width: 0.8rem;
height: 0.8rem;
position: fixed;
top: 0.2rem;
right: 0.3rem;
z-index: 9999;
background-size: contain;
text-align: center;
}
@keyframes music {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#music img.m{
width: 100%;
height: 100%;
}
#music img.off {
position: absolute;
top: 25%;
left: 25%;
transform: translateX(-50%);
animation: music 2s linear infinite;
}
<script type="text/javascript">
$(function(){
var play=true;
$("#music").click(function(e){
if(play==true){
$(".m").hide();
$(".off").css({
"transform":"rotate(0deg)",
"animation":"music 0s"
})
$(".bgmusic").get(0).pause();
play=false;
}else{
$(".m").show();
$(".off").css({
"animation":"music 2s linear infinite"
})
$(".bgmusic").get(0).play()
play=true;
}
})
})
</script>
h5 中MP3 播放暂停 jq的更多相关文章
- Cocos2d-x中背景音乐播放暂停与继续
背景音乐播放暂停与继续似乎我们很少使用,事实上也正是如此,背景音乐播放暂停与继续实例代码如下: SimpleAudioEngine::getInstance()->pauseBackground ...
- 关于h5中背景音乐的自动播放
音乐的自动播放属性,这里也介绍一下: <audio controls="controls" autoplay="autoplay"> <sou ...
- App中h5音频不能播放问题
前置:以下问题是针对vue项目的解决方案 问题一:IOS中音频不能自动播放 原因:ios禁止了音频自动播放 解决办法:在vue的生命周期mounted中获取音频Dom并调用音频播放方法play(),注 ...
- 如何安装整个linux系统中所需要的mp3播放库插件? 可以在安装rpmfusion仓库后直接通过dnf install进行按照就可以了
在vi的界面中, 前面的数字, 表示一行. 而对于中文而言, 并不一定是"一个文本行"就是一行, 而是以 回车(硬回车)为标志, 来判定一行的. 而dd, yy等也是以" ...
- MP3中设置播放顺序的软件《闪存式MP3伴侣》
给姥爷买了一个插卡音箱,里面拷贝了几百段评书,每一段评书都是一个mp3文件,虽然插卡音箱会自动一个文件一个文件自动播放,可是比较郁闷的是评书的播放顺序完全是乱的,毫无规律可寻,本来我的mp3文件的文件 ...
- 31.JS实现控制HTML5背景音乐播放暂停
实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...
- h5中的audio音频标签与对应的dom对象
HTML5中提供了一个<audio>标签,同时也提供了一个Audio对象给JavaScript去操作,这个对象属于HTML的DOM对象. H5中的<audio>标签 此标签是H ...
- C# MP3播放帮助类
本文为原创文章如需转载请注明出处: /// <summary> /// ************************************************* /// 类名:M ...
- MP3播放器团队项目
一.设计思路 程序要求能播放MP3文件,因此需调用库中的播放方法:右键工具箱选择项,添加com组件,选择window media player后工具箱就会多一个控件,然后拖到窗体中就OK了.另在窗体中 ...
随机推荐
- Java Socket编程如何建立两者关系
转自:http://developer.51cto.com/art/201003/190582.htm Java Socket编程需要大家详细的学习,有关的技术一直在不断的更新.那么要如何才能掌握好有 ...
- Html.PartialView(),html.Renderpartial,html.action.html.RenderAction 辅助方法
Html.Partial(), 返回HTML字符串 .参数为部分视图 html.RenderPartial(),不返回返回HTML字符串 ,直接输出响应流.参数为部分视图 一般用于主视图中已经存在了这 ...
- Pascal之计算小系统
program Project16; {$APPTYPE CONSOLE} VAR n,i,k,score,b,a:integer; answer,c:real; ch:char; Begin rep ...
- 项目迁移腾讯云后,用户反馈,https证书不匹配。
腾讯云大禹高防大禹BGP同一IP绑定多个证书,用户反馈无法匹配我们域名对应证书.但是浏览器是支持的.定位为客户端不支持sni在运维检查lb及高防证书关联无误,定位发现是用户端httpclient没有设 ...
- E20180128-hm
paradigm n. 范例,样式,模范; 词形变化表; outlet n. 出口,出路; 批发商店; 排水口,通风口; 发泄(情感)的方法;
- Pycharm的安装教学
Python环境搭建—安利Python小白的Python和Pycharm安装详细教程 人生苦短,我用Python.众所周知,Python目前越来越火,学习Python的小伙伴也越来越多.最近看到群里的 ...
- 2018SCin tsyzDay2 模拟赛-动态规划(简单的)
内心OS:简单?????还是我太弱了. 期望得分:100+100+0+0+0+0+随机暴力的点==200 实际得分:0+100+10+0+10+0==120 您知道我第一题为什么错了嘛??文件在混乱中 ...
- ElasticSearch | centos7 上安装ES
0 参考博客文章(感谢!!!) [1] https://www.jianshu.com/p/10949f44ce9c 在linux服务器上安装jdk [2] https://www.elastic ...
- SQL 实战教程(八)
http://www.studyofnet.com/news/247.html 1.修改字段为自增 alter table [dbo].[Logs] drop column ID alter tabl ...
- 在Python解释器运行程序
在解释器中运行 ***.py文件的方法:使用import添加模块 ***.py,然后调用 ***.py中的函数 例:在zoo.py中定义hours函数 运行方法: >>> impo ...