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 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
js实现一键复制功能
Mar 16 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
node 版本切换的实现
Feb 02 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 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 EOT定界符的使用详解
2008/09/30 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Webpack的dll功能使用
2018/06/28 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Python中subprocess的简单使用示例
2015/07/28 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
基于python3生成标签云代码解析
2020/02/18 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
介绍Java的内部类
2012/10/27 面试题
幼儿园的门卫岗位职责
2014/04/10 职场文书
python urllib库的使用详解
2021/04/13 Python