β

JQuery自动播放提示音

LixiPHP 2036 阅读

在网站开发中,有时需要一个提示音告诉不在浏览器面前的人有新消息了。当然很多人想能不能实现浏览器自动置顶到其他桌面程序,然后弹出窗口告诉用电脑的人呢?答案是不行的,浏览器目前不知道这样的事件,但是浏览器发出提示音是可以的。

jquery alert voice and Jplayer自动播放提示音

最早对网站有自动提示音的功能,我发现在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&amp;id=jplayer&amp;vol=0.8&amp;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;
}

(...)
Read the rest of JQuery自动播放提示音 (17 words)


© lixiphp for LixiPHP, 2013. | Permalink | No comment | Add to del.icio.us
Post tags: HTML5, JPlayer, JQuery, 播放提示音

Feed enhanced by Better Feed from Ozh

作者:LixiPHP
专注于建设高品质网站!
原文地址:JQuery自动播放提示音, 感谢原作者分享。

发表评论