html消息通知声⾳,ajax实现web页⾯的消息实时提醒时播放提
⽰⾳
在应⽤系统的开发过程中，经常要使⽤到新消息的提醒功能，⽐如说后台有⼀个告警消息，web页⾯就会实时的收到这个告警的消息，且发出提⽰⾳。
这其实就是涉及到两个⽅⾯的知识，⼀个是http实时消息的推送，在这⼉我就不做升⼊的探讨，我的下⼀篇⽂章将进⾏升⼊的探讨，这⼉我就主要就主要探讨的是实时播放提⽰⾳，这⼉我⽤到的是HTML5中的
标签的属性
属性
值
描述
autoplay
autoplay
如果出现该属性，则⾳频在就绪后马上播放
controls
controls
如果出现该属性，则向⽤户显⽰控件，⽐如播放按钮。
loop
loop
如果出现该属性，则每当⾳频结束时重新开始播放。
preload
preload
如果出现该属性，则⾳频在页⾯加载时进⾏加载，并预备播放
如果使⽤ "autoplay"，则忽略该属性。。
src
url
要播放的⾳频的 URL。
由于我们的播放声⾳要⽤js控制，我们查阅w3school可以看到以下的内容，
关于audio的详细⽹址如下：
1.第⼀个尝试的⽅法
可以看到我们只要调⽤play()函数就可以播放⾳频⽂件了，所以代码如下：
HTML>
function autoPlay(){
var myAuto = ElementById('myaudio');
myAuto.play();
看似只要点击就会播放声⾳，但是有个bug，只要点击按钮就会播放声⾳，但是有个问题是⼀⾸歌没播放完，你就点击，他是没有反应，不会再从头播放，只到把这个播放完了才⼜开始。
⽽且在这⽽没有问题，加到项⽬中在⾕歌浏览器下，要刷新两次，才能实现每次点击，播放⾳乐。
2.改进
后来根据其属性进⾏了改进，因为有⼀个autoplay属性，这样每次点击的时候，我们让其src指向我们的⾳乐⽂件，这样就可以实现每次点击就从头播放⾳乐⽂件了，代码如下：
HTML>
function autoPlay(){
var myAuto = ElementById('myaudio');
myAuto.src="abc.mp3"; //注意这⼉是所指向的src，然后下⾯有⼀个autoplay属性，只要准备就绪，就播放，所以每次从头开始，因为每次从服务器下载过来就播放
}
最后贴⼀下我的ajax实现的web页⾯的消息实时提醒提⽰⾳的综合代码如下：
ajax实现的长轮询
function longPolling()
{
$.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){
html播放音乐代码
if(textStatus=="timeout")  //请求超时
{
longPolling();
}
else      // 其他错误，如⽹络错误等
longPolling();
}
}
});
}
//响起提⽰⾳
function playsound()
{
var myAuto = ElementById('myaudio'); myAuto.src="/sound/abc.mp3";
}
下⼀篇⽂章将会总结http推送技术前端的探讨。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。