首页 > 语言 > JavaScript > 正文

jquery控制背景音乐开关与自动播放提示音的方法

2024-05-06 14:46:12
字体:
来源:转载
供稿:网友

本文实例讲述了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>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选