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高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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验证码类代码分享(已封装成类)
2011/07/17 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
eval与window.eval的差别分析
2011/03/17 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python continue继续循环用法总结
2018/06/10 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
python可视化实现KNN算法
2019/10/16 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
通过cmd进入python的步骤
2020/06/16 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
运动会加油稿30字
2015/07/21 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
话题作文之诚信
2019/11/28 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
Python读写yaml文件
2022/03/20 Python
golang使用map实现去除重复数组
2022/04/14 Golang