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了.另在窗体中 ...
随机推荐
- ubuntu搭建开发环境踩坑实录
谨以此文,记录和ubuntu系统不死不休的搏斗过程,后续待补. 1.双系统安装,windows采用uefi模式安装(优启通可制作uefi的win10安装盘),ubuntu不要划分boot区,而应该划分 ...
- pycharm中关于django和buildout的配置
pycharm提供了对django和buildout的支持,具体的配置如下: 1.django support 在pycharm的settings中修改如下3个选项 1)django project ...
- 解决window.opener.obj instanceof Object会输出false的问题
在a.html页面中: window.obj = {name: "jinbang"} 在a.html页面中打开新窗口b.html页面: console.log(window.ope ...
- java 字符串的比较compareTo
import java.util.Scanner; public class Demo01 { public static void main(String[] args) { Scanner ...
- Normal equations 正规方程组
前面我们通过Gradient Descent的方法进行了线性回归,但是梯度下降有如下特点: (1)需要预先选定Learning rate: (2)需要多次iteration: (3)需要Feature ...
- Webform 内置对象(Response对象、Request对象,QueryString)
Response对象:响应请求 Response.Write("<script>alert('添加成功!')</script>"); Response.Re ...
- JDK集合框架--综述
接下来的几篇博客总结一下对jdk中常用集合类知识,本篇博客先整体性地介绍一下集合及其主要的api: 从整体上来说,集合分两大类collection和map: 首先来看看Collection: c ...
- 快速开发框架天梭(Tissot)
天梭(Tissot)集成SpringBoot+Dubbo等主流互联网技术栈,高度集成.优化方便快速搭建应用.某互金科技公司内部孵化框架,已应用于公司90%业务系统. 框架划分模块有: tissot-c ...
- InChatter系统之服务客户端的开发
今天终于开始客户端的开发了,客户端完成以后,我们将可以进行简单的交流.开发完成的程序只是一个很简单的雏形,在本系统完成以后,以及完成的过程中,大家都可以下载源码,在此基础上融入自己的想法和尝试,可以按 ...
- 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(一)-----mapState
一.通过mapState函数的对象参数来赋值: <p>{{ count }}</p> <p>{{ count1 }}</p> <p>{{ c ...