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


Posted in Javascript onFebruary 06, 2015

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

以上介绍了jquery如何控制背景音乐开关的方法,接下来再进一步扩展。

二、JQuery自动播放提示音

最早对网站有自动提示音的功能,发现在Discuz论坛中出现。但是它有一个问题就是只支持flash,不支持HTML5,不明确最新版本中是否支持HTML5。
对于Discuz 7.2 版本中,提供了player.swf、pm_1.mp3、pm_2.mp3、pm_3.mp3,然后使用如下脚本来实现:

<div id="soundplayerlayer" style="position:absolute;top:-100000px"></div> 

<script type="text/javascript" reload="1"> 

function soundplayer(file) { 

    $('soundplayerlayer').innerHTML = AC_FL_RunContent('id', 'pmsoundplayer', 'name', 'pmsoundplayer', 'width', '0′, 'height', '0′, 'src', '{$boardurl}images/sound/player.swf', 'FlashVars', 'sFile={$boardurl}images/sound/pm_' + file + '.mp3′, 'menu', 'false',  'allowScriptAccess', 'sameDomain', 'swLiveConnect', 'true'); 

} 

</script>

 
可惜这个方法局限在flash,在苹果设备上可能就会遇到麻烦了。

HTML5开源播放器JPlayer支持自动播放提示音
JPlayer支持play事件触发自动播放提示音。

1. 装载JPlayer到一个div层,例如#jplayer。

$(function() { 

    $("#jplayer").jPlayer({ 

      swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf", 

      ready: function () { 

        $(this).jPlayer("setMedia", { 

          mp3: "./resources/message.mp3" 

        }); 

      }, 

      supplied: "mp3" 

    }); 

});

body部分加入:<div id="jplayer"></div>

装载JQuery完成后,jplayer的div内容在支持swf的浏览器内变成:
 

<div id="jplayer" style="width: 0px; height: 0px;"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"><object height="1" width="1" id="jp_flash_0" data="http://www.jplayer.org/latest/js/Jplayer.swf" type="application/x-shockwave-flash" style="width: 0px; height: 0px;"><param name="flashvars" value="jQuery=jQuery&id=jplayer&vol=0.8&muted=false"><param name="allowscriptaccess" value="always"><param name="bgcolor" value="#000000"><param name="wmode" value="opaque"></object></div>

在支持HTML5的浏览器内变成:
 

<div id="jplayer" style="width: 0px; height: 0px;"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"><audio id="jp_audio_0" preload="metadata" src="./resources/message.mp3"></audio></div>

完成装载后就是触发播放的事件了。

2. 触发播放提示音事件
 

$("#jplayer").jPlayer('play');

3. 循环播放函数,每5秒播放一次提示音
 

function PlaySound() { 

    $("#jplayer").jPlayer('play'); 

    setInterval("PlaySound()", 5000); 

    return true; 

}

附录:

1. 解决无法自动播放提示音的问题

如果在加载JQplayer后,立刻运行播放的触发事件,没有任何效果!具体是什么原因我也不太清楚,估计是因为音频文件没有加载上。

2. 解决方法是让触发事件等待5秒中执行。

setTimeout("$('#jplayer').jPlayer('play')", 5000);

加载完页面,5秒后自动播放提示音。

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript getElementsByClassName实现代码
Oct 11 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
微信小程序按钮点击跳转页面详解
May 06 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
详解Vite的新体验
Feb 22 Javascript
触屏中的JavaScript事件分析
Feb 06 #Javascript
JavaScript事件委托技术实例分析
Feb 06 #Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 #Javascript
JavaScript 异常处理 详解
Feb 06 #Javascript
jquery中change()用法实例分析
Feb 06 #Javascript
javaScript的函数对象的声明详解
Feb 06 #Javascript
javascript实用方法总结
Feb 06 #Javascript
You might like
使用PHP模拟HTTP认证
2006/10/09 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
写给小白看的JavaScript异步
2017/11/29 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python统计文章中单词出现次数实例
2020/02/27 Python
教师应聘自荐信范文
2014/03/14 职场文书
活动宣传策划方案
2014/05/23 职场文书
保护环境标语
2014/06/09 职场文书
护士个人年终总结
2015/02/13 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
张丽莉观后感
2015/06/16 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL