ajax實現web頁面的消息實時提醒時播放提示音

時間 2019-11-16

標籤 ajax 實現 web 頁面消息實時提醒播放提示音欄目 Ajax 简体版

原文原文鏈接

在應用系統的開發過程當中，常常要使用到新消息的提醒功能，好比說後臺有一個告警消息，web頁面就會實時的收到這個告警的消息，且發出提示音。javascript

這其實就是涉及到兩個方面的知識，一個是http實時消息的推送，在這兒我就不作升入的探討，個人下一篇文章將進行升入的探討，這兒我就主要就主要探討的是實時播放提示音，這兒我用到的是HTML5中的<audio>html

<audio> 標籤的屬性

屬性	值	描述
autoplay	autoplay	若是出現該屬性，則音頻在就緒後立刻播放
controls	controls	若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
loop	loop	若是出現該屬性，則每當音頻結束時從新開始播放。
preload	preload	若是出現該屬性，則音頻在頁面加載時進行加載，並預備播放前端若是使用 "autoplay"，則忽略該屬性。。java
src	url	要播放的音頻的 URL。

因爲咱們的播放聲音要用js控制，咱們查閱w3school能夠看到如下的內容，web

關於audio的詳細網址以下：ajax

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，只要點擊按鈕就會播放聲音，可是有個問題是一首歌沒播放完，你就點擊，他是沒有反應，不會再從頭播放，只到把這個播放完了才又開始。dom

並且在這而沒有問題，加到項目中在谷歌瀏覽器下，要刷新兩次，才能實現每次點擊，播放音樂。

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推送技術前端的探討。