$(".gameSound").bind("click",function() {
            var audio = document.getElementById('music1');
           
            if(audio.paused){
                $(".gameSound").css({ //切换到播放的背景图片
                    "background": "url(../../../img/game/Sound.png) center no-repeat",
              "background-size": "cover"
                })
                audio.play();//audio.play();//播放
            }else{
                $(".gameSound").css({ //切换到暂停的背景图片
                    "background": "url(../../../img/game/SoundClose.png) center no-repeat",
              "background-size": "cover"
                })
                audio.pause();// 暂停
            }
         })

JS - 音频的播放和暂停的更多相关文章

  1. iOS 9音频应用播放音频之播放控制暂停停止前进后退的设置

    iOS 9音频应用播放音频之播放控制暂停停止前进后退的设置 ios9音频应用播放控制 在“iOS 9音频应用播放音频之ios9音频基本功能”一文可以看到AVAudioPlayer类有很多的属性以及方法 ...

  2. iOS 9音频应用播放音频之ios9音频基本功能

    iOS 9音频应用播放音频之ios9音频基本功能 在iOS 9音频应用开发中最为简单和常用的就是AVFoundation框架中的AVAudioPlayer类.虽然AVAudioPlayer类不能播放网 ...

  3. H5多媒体(用面向对象的方法控制视频、音频播放、暂停、延时暂停)

    视频,音频播放器会是我们在工作中用到的一些h5新标签,它自带一些属性,比如暂停播放,快进快退,但是,我们经常不用原生的样式或者方法,我们需要自定义这些按钮来达到我们需要的样式,也需要我们自定义来实现一 ...

  4. [js常用]连续播放音频

    许多音频连续播放.有的时候音频过大会分成多个音频.播放的时候需要连续播放 <!DOCTYPE HTML> <html> <head> <meta charse ...

  5. Wavesurfer.js音频播放器插件的使用教程

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...

  6. vue解决音频可视化播放,使用wavesurfer.js

    vue解决音频可视化播放,使用wavesurfer.js 上效果:   1.安装wavesurfer  npm install wavesurfer.js 2.在页面导入 import WaveSur ...

  7. HTML5-video标签-实现点击预览图播放或暂停视频

    HTML5-video标签-实现点击预览图播放或暂停视频 刚刚参加工作,开始更多的接触到一些新的知识,促使我开始了解html5和css3的新特性.这时我才真的发现到html5和css3的强大. 之前关 ...

  8. HTML5 - 使用JavaScript控制<audio>音频的播放

    有时我们需要使用js来控制播放器实现音乐的播放,暂停.或者使用js播放一些音效.   1,通过JavaScript控制页面上的播放器 比如把页面上添加一个<audio>用来播放背景音乐(由 ...

  9. HTML+纯JS制作音乐播放器

    该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...

随机推荐

  1. kafka控制测试发送接收消息

    kafaka,生产者:./kafka-console-producer.sh --broker-list localhost:9092 --topic testTopic 消费者:./kafka-co ...

  2. 你需要知道的 JavaScript 类(class)的这些知识

    作者: Dmitri Pavlutin译者:前端小智来源:dmitripavlutin 点赞再看,养成习惯 本文 GitHub https://github.com/qq44924588... 上已经 ...

  3. 当你输入一个url链接发生了什么?

    先看一张图 打开手机和pad的QQ 发送消息给QQ好友,此时发送了一个请求给服务器,服务器接受到后反馈给手机和pad发送消息成功,然后QQ好友就可以接受到消息了 电脑浏览器输入百度 打开台式电脑或者笔 ...

  4. python中主要存在的四种命名方式:

    1.object  -- 公用方法 2._object -- 办保护 (1)被看做是‘protect’,意思是只用类对象和自来对象自己能访问的变量 (2)在模块或类外不可以使用,不能用 ‘from m ...

  5. ionic3记录之APP运行时网络判断

    判断设备网路是否正常: 安装插件: ionic cordova plugin add cordova-plugin-network-information npm install --save@nat ...

  6. Nginx 的优势

    Nginx 的优势 在 Java 开发中,Nginx 有着非常广泛的使用,随便举几点: 使用 Nginx 做静态资源服务器:Java 中的资源可以分为动态和静态,动态需要经过 Tomcat 解析之后, ...

  7. ch6 列表和导航条

    为列表添加定制的项目符号 可使用list-style-image属性:缺点是对项目符号图像的位置的控制能力不强. 常用的方法:使用list-style-type来关闭项目符号,将定制的项目符号作为背景 ...

  8. 统计学习方法——KD树最近邻搜索

    李航老师书上的的算法说明没怎么看懂,看了网上的博客,悟出一套循环(建立好KD树以后的最近邻搜索),我想应该是这样的(例子是李航<统计学习算法>第三章56页:例3.3): 步骤 结点查询标记 ...

  9. python2学习------基础语法4(模块)

    1.整体结构层次(a.py,b.py) 目标:b.py文件中导入a.py里面定义的class A,并调用A类里面的属性或相关方法. 2.模块导入 <1>  __init__.py < ...

  10. java 牌型种数

    牌型种数 小明被劫持到X赌城,被迫与其他3人玩牌. 一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花色,只考虑点数,也不考虑自己得 ...