建立一个HTML5页面,放置<audio>标签,设置音频文件源,设置循环播放。准备两张图片,分别表示开启和暂停背景音乐两种状态,可以点击。

<audio id="music2" src="music.mp3"  loop="loop">你的浏览器不支持audio标签。</audio> 
<a href="javascript:playPause();"><img src="pause.gif" width="48" height="50" id="music_btn2" border="0"></a> 

Javascript

JavaScript脚本,playPause()函数。函数中判断audio音频播放状态,如果已经停止(paused)则调用.play()继续播放,如果是在播放状态,则立即暂停播放.pause(),两种状态切换时及时更新按钮图片,请看代码:

function playPause() {
var music = document.getElementById('music2');
var music_btn = document.getElementById('music_btn2');
if (music.paused){
music.play();
music_btn.src = 'play.gif';
}
else{
music.pause();
music_btn.src = 'pause.gif';
}
}

如果使用jQuery代码可以这样写:

<audio id="music" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop">你的浏览器不支持audio标签。</audio> 
$("#audio_btn").click(function(){
var music = document.getElementById("music");
if(music.paused){
music.play();
$("#music_btn").attr("src","play.gif");
}else{
music.pause();
$("#music_btn").attr("src","pause.gif");
}
});

$('.player').click(function(){
$('.lists .player').removeClass('stop');
$('.lists .player').addClass('go'); var iid = $(this).attr('iid');
var imusic = $(this).attr('imusic');
var musicObj = document.getElementById("music"); if(nowId != iid){
nowId = iid;
$('#music').attr('src',imusic);
}
if(musicObj.paused){
musicObj.play();
$(this).removeClass('go');
$(this).addClass('stop');
}else{
musicObj.pause();
$(this).removeClass('stop');
$(this).addClass('go');
}
})

JS控制背景音乐 没有界面的更多相关文章

  1. js控制5秒返回指定界面,或上一个界面

    js控制5秒返回指定界面,代码如下 <head> <meta http-equiv="Content-Type" content="text/html; ...

  2. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  3. js控制文本框只能输入中文、英文、数字与指定特殊符号.

    先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...

  4. JS控制flash的方法

    JS控制flash的一些方法:Play() ---------------------------------------- 播放动画 StopPlay()---------------------- ...

  5. js 控制Div循环显示 非插件版

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

  6. JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)

    验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数 ...

  7. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  8. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  9. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

随机推荐

  1. EL1008E: Property or field 'timestamp' cannot be found on object of type 'java.util.HashMap

    2018-06-22 09:50:19.488  INFO 20096 --- [nio-8081-exec-2] o.a.c.c.C.[Tomcat].[localhost].[/]       : ...

  2. jquery的load方法

    load方法指定一个界面会显示在目标的标签内部 比如MVC的一个分部视图页面想要显示在某个标签里面,可以写成 $(标签ID).load(分部视图名称,data) 其中第二个参数可选,主要是一些需要传递 ...

  3. Django ORM 查询操作

    queryset中支持链式操作 book=Book.objects.all().order_by('-nid').first() 只要返回的是queryset对象就可以调用其他的方法,直到返回的是对象 ...

  4. shell脚本调试打印日志问题

    shell脚本调试打印日志问题 1. 需求 我们在编写脚本的时候,有时候需要做调试,便于我们定位问题,有时候等脚本上线之后,我们需要保留脚本执行过程中的记录.便于我们在出问题的时候,定位问题. 2. ...

  5. 使用Xcode连接开源中国

    故事背景: 今天加入一个新的项目组,其实也就是包括我在内就两个人,由于对方在开源中国上建的项目我没法使用. 所以由我接手第一个任务:就是在开源中国上搭建git项目组 前提条件:xcode和 Git(h ...

  6. 洛谷P1001 A+B Problem

    这道题…………还是很简单!!! code: #include <iostream> #include <cstdio> using namespace std; int mai ...

  7. (5)zabbix配置详解

    zabbix配置介绍 zabbix配置内容比较多,我们要分为9大块来讲解.分别如下:1.主机与组不用多数,顾名思义,他是添加主机配置与组配置. 2.监控项需要监控的项目,例如服务器负载可以使一个监控项 ...

  8. centos 7 中文乱码的解决办法

    @@首先查看系统的操作版本,我的版本是centos 7.2 的. @@查看系统是否有安装中文语言包,一般我们在安装的时候系统都会默认的为我们安装上去的. locale -a | grep " ...

  9. CM3中数据传输对齐/非对齐方式

    在CM3中,非对齐的数据传输只发生在常规的数据传送指令中,如LDR.LDRH.LDRSH.其他指令则不支持,包括: 1.多个数据的加载.存储(LDM/STM). 2.堆栈操作PUSH.POP. 3.互 ...

  10. python中set()函数的用法

    set顾名思义是集合,里面不能包含重复的元素,接收一个list作为参数 list1=[1,2,3,4] s=set(list1) print(s) #逐个遍历 for i in s: print(i) ...