ajax实现web页面的消息实时提醒时播放提示音

前端之家收集整理的这篇文章主要介绍了ajax实现web页面的消息实时提醒时播放提示音前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在应用系统的开发过程中,经常要使用到新消息的提醒功能,比如说后台有一个告警消息,web页面就会实时的收到这个告警的消息,且发出提示音。

这其实就是涉及到两个方面的知识,一个是http实时消息的推送,在这儿我就不做升入的探讨,我的下一篇文章将进行升入的探讨,这儿我就主要就主要探讨的是实时播放提示音,这儿我用到的是HTML5中的<audio>

<audio> 标签属性

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放

如果使用 "autoplay",则忽略该属性

src url 要播放的音频的 URL。

由于我们的播放声音要用js控制,我们查阅w3school可以看到以下的内容

关于audio的详细网址如下:

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

1.第一个尝试的方法

可以看到我们只要调用play()函数就可以播放音频文件了,所以代码如下:

<!DOCTYPEHTML>

<html>
<head>
<scriptlanguage="javascript"type="text/javascript">
functionautoPlay(){
varmyAuto=document.getElementById('myaudio');
myAuto.play();
}
</script>
</head>
<body>
<audioid="myaudio"src="abc.mp3"controls="controls"hidden="true"style="display:none">
</audio>
<inputtype="button"onclick="autoPlay()"value="播放"/>
</body>
</html>

看似只要点击就会播放声音,但是有个bug,只要点击按钮就会播放声音,但是有个问题是一首歌没播放完,你就点击,他是没有反应,不会再从头播放,只到把这个播放完了才又开始。

而且在这而没有问题,加到项目中在谷歌浏览器下,要刷新两次,才能实现每次点击,播放音乐。

2.改进

后来根据其属性进行了改进,因为有一个autoplay属性,这样每次点击的时候,我们让其src指向我们的音乐文件,这样就可以实现每次点击就从头播放音乐文件了,代码如下

<!DOCTYPEHTML>
<!--只要点击按钮就会播放声音,但是有个问题是一首歌没播放完,你就点击,又会从头开始播放-->
<html>
<head>
<scriptlanguage="javascript"type="text/javascript">
functionautoPlay(){
varmyAuto=document.getElementById('myaudio');
myAuto.src="abc.mp3";//注意这儿是所指向的src,然后下面有一个autoplay属性,只要准备就绪,就播放,所以每次从头开始,因为每次从服务器下载过来就播放
}
</script>
</head>
<body>
<audioid="myaudio"src=""controls="controls"autoplay="autoplay"hidden="true"style="display:none">
</audio>
<inputtype="button"onclick="autoPlay()"value="播放"/>
</body>
</html>

最后贴一下我的ajax实现的web页面的消息实时提醒提示音的综合代码如下:

ajax实现的长轮询
functionlongPolling()
{
$.ajax({
type:"POST",url:"/nms/push",timeout:30000,//超时时间30秒,30秒内没有完成请求,则取消请求然后error回调函数会被调用
success:function(data,textStatus){//返回的回调函数
if(textStatus=="success")//状态码为200,完全成功才响起提示音
{
playsound();
}
//也有状态码为204,也是success回调函数,但是textStatus==nocontent
longPolling();//再发起一个连接请求
},error:function(XMLHttpRequest,textStatus,errorThrow){
if(textStatus=="timeout")//请求超时
{
longPolling();
}
else//其他错误,如网络错误等
{
longPolling();
}
}
});
}
//响起提示音
functionplaysound()
{
varmyAuto=document.getElementById('myaudio');
myAuto.src="/sound/abc.mp3";
}

下一篇文章将会总结http推送技术前端的探讨。

猜你在找的Ajax相关文章