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. swift语言实现单例模式

    Swift实现单例模式 单例模式在各个语言中都有实现,swift语言推出已经几天了.通过这几天的看文档.特奉上写的Swift的单例实现,供大家学习交流,欢迎指正. ---若转载请注明出处,本人Gith ...

  2. js绝招

    1.JS判断 function IsDigit(cCheck) { //判断是否是数字return (('0'<=cCheck) && (cCheck<='9')); } ...

  3. uni-app - vue以及微信小程序

    uni-app结合了mpvue的优点以及微信小程序的优点 ,uni-app基于vue2.0的. 组件:https://uniapp.dcloud.io/component/README 接口:http ...

  4. C# 编程实现串口通信

    http://blog.sina.com.cn/s/blog_6c67dab30101p3vn.html ----------------------------------------------- ...

  5. netsh学习

    show allowedprogram –显示被允许的程序配置 show config - 显示防火墙的配置 show currentprofile -显示 Windows 防火墙的当前配置文件. s ...

  6. 28种CSS3炫酷载入动画特效

    这是一组效果很炫酷的纯CSS3 Loading载入动画特效.这组loading动画共同拥有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完毕的,每个载入动画都构 ...

  7. 16、java包装类

    一.包装类的由来: JAVA是面向对象的编程语言,但它也包含了8种基本数据类型,这8个基本数据类型不支持面向对象的编程机制,基本数据类型的数据也不具备“对象”的特性:没有属性,方法可以被调用.JAVA ...

  8. 突破单机多实例Elasticsearch

    默认大家都是单机单实例es,在实验环境下想尽可能模拟各种场景.单机多实例就出来了... 实验拓扑图 01.es安装这里就不说了 详情:http://www.cnblogs.com/xiaochina/ ...

  9. 【laravel5.4】使用baum\node 类库实现无限极分类

    1.在model中引入baum\node 类库,并继承,具体参考 https://packagist.org/packages/baum/baum 2.核心代码: /* * model::create ...

  10. HDUOJ -----1686

    Oulipo Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...