$(".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. Dubbo 18 问

    dubbo是什么 dubbo是一个分布式框架,远程服务调用的分布式框架,其核心部分包含: 集群容错:提供基于接口方法的透明远程过程调用,包括多协议支持,以及软负载均衡,失败容错,地址路由,动态配置等集 ...

  2. session存取时 getOutputStream()和getWriter()问题

    情况1: 在使用httpResponse的getWriter()会写json是出现 getWriter() has already been called for this response,经我查看 ...

  3. 回文串[APIO2014](回文树)

    题目描述 给你一个由小写拉丁字母组成的字符串 s.我们定义 s 的一个子串的存在值为这个子串在 s中出现的次数乘以这个子串的长度.对于给你的这个字符串 s,求所有回文子串中的最大存在值. 输入格式 一 ...

  4. 3.8.1 HTML与CSS简单页面效果实例

    HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. ROS学习笔记6-理解主题

    本文来源于:http://wiki.ros.org/ROS/Tutorials/UnderstandingTopics ROS主题假设turtlesim节点已经运行,打开一个新终端,使用如下命令运行键 ...

  6. 在线配置raid

    Exit Code: 0x00 rpm -ivh MegaCli-8.07.14-1.noarch.rpm ls /opt/MegaRAID/MegaCli//opt/MegaRAID/MegaCli ...

  7. centos7 bond双网卡

    [root@pay network-scripts]# cat ifcfg-bond0 |grep -v \#TYPE="Ethernet"PROXY_METHOD="n ...

  8. 【MAVEN】maven项目下载更新pom jar包速度慢 解决方案

    1·下载安装 最新版本的maven https://maven.apache.org/download.cgi 2·速度慢的主要原因是因为默认setting.xml里配置的国外的 maven 数据源 ...

  9. Backbone.js 历史&文档

    历史: 0.1.0版本产生于  ‘— Oct 13, 2010 — Docs’ 文档: https://www.html.cn/doc/backbone/#changelog

  10. springboot打war包上传到阿里云的Linux服务器

    下面的每一步应该都必不可少: 1.启动类 继承这个类,并且重新configure这个方法,return builder.sources(Code007Application.class); 2.pom ...