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 相关文章推荐
对于this和$(this)的个人理解
Sep 08 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
JS原形与原型链深入详解
May 09 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
杏林同学录(一)
2006/10/09 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
jquery处理json对象
2014/11/03 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python语言快速上手学习方法
2018/12/14 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
主题酒店策划书
2014/01/28 职场文书
运动会通讯稿100字
2014/01/31 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
个人政治思想总结
2015/03/05 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书