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. 如何使用Total Recorder录制网上的音乐,如何下载只能试听的歌曲

    1 在网上找到了对应的网站.其中正在播放的歌曲正是我们想要的 2 在地址栏输入上面音乐网站的网址,并点击捕获广播.(URL直接给出了音乐的完整地址,比如http://www.someserver.co ...

  2. 批量合并GDB

    在实际操作中,经常对数据库文件进行合并.裁切等.如果遇到gdb比较多,要素层比较多,而且还存在数据集.虽然ArcGIS中的批量处理的功能,但填写参数过程也比较麻烦,如果一次性处理过多,程序容易停止工作 ...

  3. Android 四大组件之 Service(二)

    这里主要介绍Service组件的使用. 1.定义一个继承Service的子类 如下: package com.service; import android.app.Service; import a ...

  4. getaddrinfo()函数详解

    Socket的地址查询函数 http://blog.sina.com.cn/s/blog_988c054b010139e3.html http://www.cnblogs.com/cxz2009/ar ...

  5. 使用Draw rect 绘制圆角矩形

    - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); UIGraphicsPush ...

  6. 机器学习笔记(十)EM算法及实践(以混合高斯模型(GMM)为例来次完整的EM)

    今天要来讨论的是EM算法.第一眼看到EM我就想到了我大枫哥,EM Master,千里马.RUA!!!不知道看这个博客的人有没有懂这个梗的. 好的,言归正传.今天要讲的EM算法,全称是Expectati ...

  7. ORA-14402:更新分区关键字列将导致分区更改(分区表注意)

    建立完分区表后一定要和开发确认一点,就是是否会修改分区字段.因为update分区字段到其他分区时候,会报错.解决办法:开启表的行转移功能 alter table XX enable row movem ...

  8. OpenERP 负载平衡

    OpenERP 7.0 带来了许多新特性,架构上也有许多改进.其中可配置 worker 参数,可使 OpenERP 运行在多进程模式,突破GIL的限制,有效利用了现代多核CPU的性能.但默认情况下,O ...

  9. Android 如何将Canvas上绘制的内容保存成本地图片(转)

    效果如下图所示 保存在sd卡上的文件为 手机上显示效果为: 1>>在Manifest文件中增加相应权限 <!-- 在SDCard中创建与删除文件权限 --> <uses- ...

  10. Android拍照+方形剪裁——附代码与效果图

    本文链接    http://blog.csdn.net/xiaodongrush/article/details/29173567 參考链接    http://stackoverflow.com/ ...