$(".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. MyBatis 配置文件详解

    根元素<configuration>,子元素: <properties> <setttings> <typeAliases> <typeHandl ...

  2. EcShop二次开发学习方法

    EcShop二次开发学习方法 (2012-03-08 11:10:08) 转载▼ 标签: 京东 公用函数库 二次开发 sql语言 数据库设计 杂谈 分类: ecshop 近年来,随着互联网的发展,电子 ...

  3. 「NOWCODER」CSP-S模拟赛第3场

    「NOWCODER」CSP模拟赛第3场 T1 货物收集 题目 考场思路即正解 T2 货物分组 题目 考场思路 题解 60pts 算法:一维 DP 100pts 算法:一维 DP ?线段树 + 单调栈 ...

  4. Python3中找不到xrange定义和不能用len(map())

    问题1:python3中找不到xrange的定义,vscode中提示未定义 解决:改成range,因为python3中取消了vscode 问题2:python3中map函数返回的是迭代器,因此无法用l ...

  5. JS - 数组转字符串

        var arr =['h','e','l','l','o']     var s = arr.join("");       console.log(s); 

  6. GIMP

    1. 认识GIMP 2. GIMP与Photoshop的对比 3. GIMP官方手册教程 4. 2本GIMP的外文书下载 5. 2个外部入门教程 6. 其他相关软件 1. 认识GIMP GIMP是可用 ...

  7. English-Number

    English-Number 1. 基数与序数 2. 数量级前缀 3. 与数量级前缀连用的常用单位 4. 数量的完整写法式例 5. 数学符号 6. 其他常用单位 7. 数字的用法 7.1 日期时间 7 ...

  8. Celery的常用知识

    什么是Clelery   Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统.专注于实时处理的异步任务队列.同时也支持任务调度. Celery的架构由三部分组成,消息中间件(message ...

  9. 前端学习笔记系列一：1.export default / export const

    export default 是默认导出 export const 是命名导出 参考:Javascript (ES6), export const vs export default(基本上就是翻译这 ...

  10. 定时执行 Job【转】

    Linux 中有 cron 程序定时执行任务,Kubernetes 的 CronJob 提供了类似的功能,可以定时执行 Job.CronJob 配置文件示例如下: ① batch/v2alpha1 是 ...