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

    在應用系統的開發過程當中,常常要使用到新消息的提醒功能,好比說後臺有一個告警消息,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推送技術前端的探討。

相關文章
相關標籤/搜索