$(".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. idea右键新建选项没有类和包的创建方式

    Intelidea创建好项目之后,右键新建Java class的时候发现没有改选项,只有以下几个选项 把sec目录设为源码目录,首先打开Project Structure

  2. linux kill命令以及 信号

    kill命令介绍 命令作用 终止一个进程 语法: kill [-s signal|-p] [-q sigval] [-a] [--] pid... kill -l [signal] 选项 -l 信号, ...

  3. redis集群命令及常规操作

    集群命令 [root@redis06 etc]# redis-cli --cluster help Cluster Manager Commands: create host1:port1 ... h ...

  4. Spark实验汇总(七个实验相结合)

    日期:2020.01.20 博客期:128 星期一 一.环境搭建篇 1.安装虚拟机应用程序 VMware Workstation Pro [编写日期:2020-01-20] 去到 官网 下载 VMwa ...

  5. 编写安全 PHP 应用程序的七个习惯

    编写安全 PHP 应用程序的七个习惯   在提及安全性问题时,需要注意,除了实际的平台和操作系统安全性问题之外,您还需要确保编写安全的应用程序.在编写 PHP 应用程序时,请应用下面的七个习惯以确保应 ...

  6. UIWindow的获取

    注意:还是直接用下面这个比较靠谱.尤其是iOS11之后. [UIApplication sharedApplication].keyWindow;   1.下面这种是比较严谨的方式 - (UIWind ...

  7. /dev设备文件命名或符号链接建立

    udev是一个用户空间服务,负责监听内核设备变动事件,从/sysfs---中读取发生变动的设备属性信息,遍历 命名规则文件,进行属性规则的匹配,如果匹配,就进行执行命名自定义动作 udev 的规则和规 ...

  8. 页面的五种布局以及嵌套『Android系列八』

    转自:http://blog.csdn.net/dazlly/article/details/7860125 因为学习比较晚,我用的相关版本为SDK4.1.eclipse4.2,而自己看的教材都是低版 ...

  9. eclipse中从数据库生成hibernate实体类

    为什么写这篇BLOG,是因为经常有同事或网友问起我hiberante实体类的生成问题.所以下次再有人问我可以省一堆的话了,其实这个真的是很简单.        现在hibernate在项目中的应用是越 ...

  10. 扩展新函数给window

    page.exposeFunction(name, puppeteerFunction) name <string> Name of the function on the window ...