首先在网页中嵌入背景音乐,html5代码为:

<script src="http://wuover.qiniudn.com/jquery.js"></script>
<a class="mscBtn" id="audioBtn" title='最幸福的人' style="cursor:pointer;"></a>
<audio id="bgMusic" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay"></audio>

css样式为:

.pause {background-position: 0 bottom;}
.mscBtn {height: 50px;
background: #fff url(http://cctv2.qiniudn.com/musicbtn.png) no-repeat;
display: block;}

通过audio的id即可控制音乐的播放(play())和暂停(pause()),同时通过改变class改变按钮的背景图片,js代码为(切记要引入jq库):

$(function(){
$("#audioBtn").click(function(){
if(music.paused){
music.play();
$("#audioBtn").removeClass("pause").addClass("play");
}else{
music.pause();
$("#audioBtn").removeClass("play").addClass("pause");
}
});
});

改进了下,让网页背景音乐支持多首歌曲,播放完在随机播放下一首并且不会和上一首重复

$(function(){
var music = document.getElementById("bgMusic");
var musicArr=[//下面对应歌曲链接和歌名,自行添加用,隔开
{url:'http://cctv3.qiniudn.com/tbhdqx.mp3',title:"唐伯虎点秋香"},
{url:'http://cctv3.qiniudn.com/abzxh.mp3',title:"敖包再相会"},
{url:'http://cctv3.qiniudn.com/lmzda.mp3',title:"辣妹子的爱"},
{url:'http://cctv3.qiniudn.com/32.mp3',title:"32号嫁给你"},
{url:'http://cctv3.qiniudn.com/tongxinjishou.mp3',title:"痛心疾首"},
{url:'http://cctv3.qiniudn.com/rgangdst.mp3',title:"如果爱能感动上天"},
{url:'http://cctv3.qiniudn.com/cz.mp3',title:"车站"},
{url:'http://cctv3.qiniudn.com/hn.ogg',title:"很难"},
{url:'http://cctv3.qiniudn.com/aqlmysdsc.mp3',title:"爱情里没有谁对谁错"},
{url:'http://cctv3.qiniudn.com/dlaqdln.mp3',title:"丢了爱情丢了你"},
{url:'http://cctv3.qiniudn.com/cty.mp3',title:"闯天涯"}
];
$("#audioBtn").click(function(){
if(music.paused){
music.play();
$("#audioBtn").removeClass("pause").addClass("play");
}else{
music.pause();
$("#audioBtn").removeClass("play").addClass("pause");
}
}); function randomMusic(){
var isone=$("#bgMusic").attr('src');
var noone=musicArr[parseInt(Math.random()*musicArr.length)];
if (noone.url==isone){
var noone=musicArr[parseInt(Math.random()*musicArr.length)];
}
$("#bgMusic").attr('src',noone.url);
$("#audioBtn").attr('title',noone.title);
} randomMusic();
$("#bgMusic").on('ended',function(){
randomMusic();
});
});

JS实现控制HTML5背景音乐播放暂停的更多相关文章

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

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

  2. Cocos2d-x中背景音乐播放暂停与继续

    背景音乐播放暂停与继续似乎我们很少使用,事实上也正是如此,背景音乐播放暂停与继续实例代码如下: SimpleAudioEngine::getInstance()->pauseBackground ...

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

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

  4. HTML5背景音乐的暂停与播放

    HTML代码:     <audio id="myaudio" loop="loop" preload="auto" autoplay ...

  5. JS控制flash的播放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. js控制html5 【video】标签中视频的播放和停止

    需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----- ...

  7. html5 audio的暂停与播放

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

  8. 使用jQuery播放/暂停 HTML5视频

    文章来自:http://blog.okbase.net/jquery2000/archive/4485.html 我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后 ...

  9. apk支持html video控制 ,是播放状态就暂停,暂停状态就播放

    apk支持html video控制 <!DOCTYPE html> <html> <body> <div style="text-align:cen ...

随机推荐

  1. 两个数字比较大小的方法 (分别应用if-else和条件运算符实现)

    package com.Summer_0424.cn; /** * @author Summer * 两个数字比较大小的方法 * 分别应用if-else和条件运算符实现 */ public class ...

  2. 一本通 1212:LETTERS

    题目描述 给出一个roe×col的大写字母矩阵,一开始的位置为左上角,你可以向上下左右四个方向移动,并且不能移向曾经经过的字母.问最多可以经过几个字母. 输入 第一行,输入字母矩阵行数R和列数S,1≤ ...

  3. linux内存源码分析 - 零散知识点

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 直接内存回收中的等待队列 内存回收详解见linux内存源码分析 - 内存回收(整体流程),在直接内存回收过程中, ...

  4. Recurrent Neural Network[SRU]

    0.背景 对于如机器翻译.语言模型.观点挖掘.问答系统等都依赖于RNN模型,而序列的前后依赖导致RNN并行化较为困难,所以其计算速度远没有CNN那么快.即使不管训练的耗时程度,部署时候只要模型稍微大点 ...

  5. Spark SQL在100TB上的自适应执行实践(转载)

    Spark SQL是Apache Spark最广泛使用的一个组件,它提供了非常友好的接口来分布式处理结构化数据,在很多应用领域都有成功的生产实践,但是在超大规模集群和数据集上,Spark SQL仍然遇 ...

  6. Python股票分析系列——系列介绍和获取股票数据.p1

    本系列转载自youtuber sentdex博主的教程视频内容 https://www.youtube.com/watch?v=19yyasfGLhk&index=4&list=PLQ ...

  7. RabbitMQ 惰性队列Lazy Queue

    RabbitMQ 队列分为几种类型,按照不同维度来分,可以分为排他性队列.普通队列.延迟队列.惰性队列.发布订阅队列等. 今天我们讨论的主角是惰性队列 Lazy Queue.众所周知,队列可以存储消息 ...

  8. webpack 中版本兼容性问题错误总结

    一定不要运行npm i  XXX  -g(-d) 一定要指定版本,尽量低版本,也不最新版本,会导致不兼容和指令不一样的问题. 1.安装webpack-dev-server 报错,说需要webpack- ...

  9. 基于 Token 的身份验证:JSON Web Token(附:Node.js 项目)

    最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twitter,Google+,Github 等等,比起传统的身份验证方法,Token 扩展性更强, ...

  10. vuex状态管理工具

    父子组件之间的通信  props传递  父 向子单向传递:且每次 父组件更新时  子组件的props会跟着更新: 如果需要 子组件把数据传递给父组件,就需要在子组件上绑定自定事件 在子组件使用this ...