本文实例讲述了jquery控制背景音乐开关与自动播放提示音的方法。分享给大家供大家参考。具体如下:
很多人初学网页制作时在网页中加入一段背景音乐,听到音乐响起的那一刻往往都会有一丝的成就感。
这里就为大家讲解如何使用js控制背景音乐播放与停止。具体如下:
一、jquery控制背景音乐开关
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
//加载背景音乐,并自动播放
$('#bg_music').append('<embed id="m_bg_music" loop=true volume="60" autostart=true hidden=true src="guoan.mp3" />');
$('#bg_music_btn').click(function(){
var state = $('#bg_music_btn').attr('state');
if(state == '1')//
{
$('#bg_music_btn').attr('state','0');
$('#bg_music_btn').html('打开背景音乐');
$('#m_bg_music').remove();
}else if(state == '0')
{
$('#bg_music_btn').attr('state','1');
$('#m_bg_music').remove();
$('#bg_music_btn').html('关闭背景音乐');
$('#bg_music').append('<embed id="m_bg_music" loop=true volume="60" autostart=true hidden=true src="guoan.mp3" />');
}
});
</script>
</head>
<body>
<!--控制播放-->
<div id="bg_music_btn" state='1'>关闭背景音乐</div>
<!--背景音乐-->
<div id="bg_music"></div>
</body>
</html>
新闻热点
疑难解答
图片精选