html5 audio 给博客 网页加背景音乐 可以加上个按钮或者链接 让其可停止或暂停

下面代码只是暂停 可以弄成暂停 播放两种状态切换。。

可以考虑换成a标签

  1. <a href="#" onClick="musicPaused()">停止</a>
  1. <script type="text/javascript">
  2. function musicPaused() {
  3. var music = document.getElementById("clickSound");
  4. music.pause();
  5. }
  6. </script>
  7. <audio id="clickSound" autoplay="autoplay">
  8. <source src="http://girls.iganlei.cn/baidupan/1125435669/4178294675.mp3">
  9. </audio>
  10. <input id="btn" type="button" onclick="musicPaused()" value="停止" />

HTML5添加背景音乐的更多相关文章

  1. h5页面添加背景音乐

    [需求]h5页面添加背景音乐,支持微信.QQ.各种APP. [实现思路]1.通过audio标签,设置自动播放,是一种方法,但是此方法只适合微信.QQ,并不兼容我司的APP,需要主动触发下播放事件. 2 ...

  2. Java代码添加背景音乐

    太心塞!弄了很久才终于把Java添加背景音乐实现了.不过还是很Happy! 这次介绍的办法,是只要一打开Java Application,便可直接听到背景音乐.代码保存,方便以后再次利用. packa ...

  3. vue添加背景音乐

    vue添加背景音乐需要用到HTML中的标签 参考手册:http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp *在iOS端autopl ...

  4. vue 页面 添加背景音乐

    背景音乐 添加背景音乐 并有单击事件   循环播放 <template> <div id="page"> <div style="width ...

  5. QQ空间添加背景音乐

    QQ空间背景音乐方式 1.QQ音乐添加背景音乐一种是开通绿砖[有矿的忽略此条]2.QQ空间添加网络音乐的方法步骤:1.首先,需要先下载好想要音乐作为QQ空间背景音乐的歌曲文件(建议为MP3格式)[我这 ...

  6. 005-unity3d 添加背景音乐、音效 以及 天空盒子

    一.基础知识 1.项目中需要有AudioListener,播放器中播放的声音就是AudioListener组件坐在的位置听到的声音.默认AudioListener是放到Main Camera上.没有A ...

  7. HTML中添加背景音乐

    <audio controls="controls" height="100" width="100"> <source ...

  8. Unity 之 添加背景音乐 以及 Slider控制

    游戏音频分为背景音乐与环境音乐两种.Audio   Clip(音频剪辑)有四种音乐格式.MP3:适合较长音频,作为背景音乐.Ogg:适合较长音频,作为背景音乐.Wav:适合较短音频,作为环境音乐.Ai ...

  9. xcode添加背景音乐/音效

    xcode添加音效:http://www.cnblogs.com/jiayongqiang/p/5625886.html 背景音乐: ios播放音乐时会用到一个叫做AVAudioPlayer的类,这个 ...

随机推荐

  1. Hibernate绑定参数

    使用绑定参数的优势: 我们为什么要使用绑定命名参数?任何一个事物的存在都是有其价值的,具体到绑定参数对于HQL查询来说,主要有以下两个主要优势:①. 可以利用数据库实施性能优化 因为对Hibernat ...

  2. Expected authority at index 7: hdfs://

    hadoop版本:1.0.4 今天在跑TestForest的时候,居然出现了这个问题: Exception in thread "main" java.lang.IllegalAr ...

  3. 【十】注入框架RoboGuice使用:(Your First Testcase)

    上一篇我们简单的介绍了一下RoboGuice的使用([九]注入框架RoboGuice使用:(Your First Injected Service and BroadcastReceiver)),今天 ...

  4. nginx : TCP代理和负载均衡的stream模块

    一直以来,Nginx 并不支持tcp协议,所以后台的一些基于TCP的业务就只能通过其他高可用负载软件来完成了,比如Haproxy. 这算是一个nginx比较明显的缺憾.不过,在1.90发布后这个认知将 ...

  5. java.lang.ClassCastException: org.springframework.web.filter.CharacterEncodingFilter cannot be cast to javax.servlet.Filter

    java.lang.ClassCastException: org.springframework.web.filter.CharacterEncodingFilter cannot be cast ...

  6. stagefright框架(四)-Video Buffer传输流程

    這篇文章將介紹Stagefright中是如何和OMX video decoder传送buffer. (1) OMXCodec會在一開始的時候透過read函式來傳送未解碼的data給decoder,並且 ...

  7. hadoop源码编译

    为何要自行编译hadoop源码,往往是由于官方提供的hadoop发行版都是基于32位操作系统,在操作hadoop时会发生warn.   准备软件: 1)JDK 2)Hadoop源码 3)Maven 4 ...

  8. 导出kettle数据转换设置

    在本地测试好的数据清洗配置,要转移到服务器上,就要用到导出数据转换设置. 一直是这使用是在导入设置的 时候总是提示不是kettle的文档格式.后来才发现这是资源库的配置,而不是数据转 换的配置. 导出 ...

  9. 模拟HTTP请求:Request Maker

    摘要 : Request Maker是一款可以模拟HTTP请求的谷歌浏览器插件. Request Maker的开发背景 现在由于restful式的web api的兴起,越来越多的开发者习惯使用URL来 ...

  10. thinkphp框架开启页面gzip压缩

    Thinkphp下开启gzip压缩很简单,不管你是哪个版本,只要在你的入口文件index.PHP中加入以下两行,如果你的服务器支持,那么就OK了. define ( "GZIP_ENABLE ...