HTML代码:
    <audio id="myaudio" loop="loop" preload="auto" autoplay="autoplay">
                    <source src="music/纯音乐%20-%20在那遥远的地方%20-%20纯音乐版.mp3" type="audio/ogg" />
                    <source src="music/纯音乐%20-%20在那遥远的地方%20-%20纯音乐版.mp3" type="audio/mp3" />
                </audio>

<img onclick="swap_music()" src="/images/icon_music.png" style="height:30px; vertical-align:middle;" />

JS代码:
 //背景音乐停止与播放
        function swap_music() {
            var oAudio = document.getElementById('myaudio');
            if (oAudio.paused) {
                oAudio.play();
            }
            else {
                oAudio.pause();
            }
        }

HTML5背景音乐的暂停与播放的更多相关文章

  1. html5 audio的暂停与播放

    在html5里,audio是新增的功能.它方便了用户. 大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频 ...

  2. js控制html5 audio的暂停、播放、停止

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  3. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  4. HTML5 audio标签自制音乐播放器

    相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...

  5. [转载]html5直接在网页上播放视频音频兼容所有浏览器

    文章给大家分享一个html5直接在网页上播放视频兼容所有浏览器,有需要的同学可参考. HTML5可以用video标签来播放视频 当前,video 元素支持三种视频格式: 格式 IE Firefox O ...

  6. 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. 解决html5中video标签无法播放mp4问题的办法

    这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...

  8. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  9. 纯 CSS 方式实现 CSS 动画的暂停与播放!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. iOS单元測试:Specta + Expecta + OCMock + OHHTTPStubs + KIF

    框架选择 參考这篇选型文章,http://zixun.github.io/blog/2015/04/11/iosdan-yuan-ce-shi-xi-lie-dan-yuan-ce-shi-kuang ...

  2. ubuntu 安装 codelite

    http://www.linuxidc.com/Linux/2013-06/85332.htm Ubuntu 12.04下为codelite增添更新源 1.获取codelite的公钥 sudo apt ...

  3. Electron 调用系统Office软件

    通过打开本地空白文件的方式从而打开Office办公软件 const shell = require('electron').shell; const path = require('path'); s ...

  4. 动态IP或无公网IP时外网訪问内网ORACLE数据库

    ORACLE数据库是应用最多的一个数据库.一般项目应用.将ORACLE部署在内网,内网调用,及运维都仅仅能是内网完毕. 假设ORACLE主机或所在局域网没有固定公网IP,又想在外网对ORACLE进行訪 ...

  5. jdbc第二天

    事务 l 连接池 l ThreadLocal l BaseServlet自定义Servlet父类(只要求会用,不要求会写) l DBUtils à commons-dbutils 事务 l 事务的四大 ...

  6. iOS-高仿微信摇一摇动画效果加震动音效

    概述 摇一摇动画效果 (加震动音效) 详细 代码下载:http://www.demodashi.com/demo/10707.html 众所周知, 微信中的摇一摇功能: 搜索人/歌曲/电视,同样在一些 ...

  7. 关于 while(1)和for(;;)效率问题的一点想法

    这几天看到好友的文章关于while(1)和for(;;)效率的讨论,手痒说了两句.回头一寻思,自己也仅仅是判断.没有做不论什么实验,我们就看看这两种写法究竟有什么差别: 实验环境:IAR EWARM ...

  8. JavaScript中的数组与伪数组的区别

    在JavaScript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function). 基本数据类型:String,boolean,Number,Undefined, Null 引用数 ...

  9. Linux查看GPU信息和使用情况

    Linux查看显卡信息: lspci | grep -i vga 使用nvidia GPU可以: lspci | grep -i nvidia [root@gpu-server-002 ~]# lsp ...

  10. [ubuntu]为ubuntu设立“任务管理器”的组合键

    在windows下面,我们可以方便的使用ctrl+alt+delete调出任务管理器,那么在ubuntu下面如何实现呢?这里我们介绍两种方法:1.在终端下运行: 代码:gconf-editor 找到: ...