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

最新推荐文章于 2021-08-05 22:32:27 发布

weixin_34351321

最新推荐文章于 2021-08-05 22:32:27 发布

阅读量1k

点赞数

文章标签： javascript 前端 python ViewUI

原文链接：https://my.oschina.net/u/1540325/blog/413387

版权

2019独角兽企业重金招聘Python工程师标准>>>

在应用系统的开发过程中，经常要使用到新消息的提醒功能，比如说后台有一个告警消息，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()函数就可以播放音频文件了，所以代码如下：

<!DOCTYPE HTML>

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

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

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

2.改进

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

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

最后贴一下我的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){
            if(textStatus=="timeout")  //请求超时
            {  
                longPolling();
            }
            else      // 其他错误，如网络错误等
            {
                 longPolling();
            }
        }
    });
}
//响起提示音
function playsound()
{
    var myAuto = document.getElementById('myaudio');
    myAuto.src="/sound/abc.mp3";
}

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

转载于:https://my.oschina.net/u/1540325/blog/413387