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: "http://demo.lixiphp.com/jplayer_auto_play/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="http://blog.lixiphp.com/demo/jplayer_auto_play/resources/message.mp3"></audio></div>

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

2. 触发播放提示音事件

$("#jplayer").jPlayer(‘play’);

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

function PlaySound() {

$("#jplayer").jPlayer(‘play’);

setInterval("PlaySound()", 5000);

return true;

}

就这么简单，试试吧!

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

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

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

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

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

Jplayer自动播放演示

等待5秒后触发播放事件，成功自动播放提示音：http://blog.lixiphp.com/demo/jplayer_auto_play/

直接触发事件将无法自动播放：http://blog.lixiphp.com/demo/jplayer_auto_play/not_work.html