在應用系統的開發過程當中,常常要使用到新消息的提醒功能,好比說後臺有一個告警消息,web頁面就會實時的收到這個告警的消息,且發出提示音。javascript
這其實就是涉及到兩個方面的知識,一個是http實時消息的推送,在這兒我就不作升入的探討,個人下一篇文章將進行升入的探討,這兒我就主要就主要探討的是實時播放提示音,這兒我用到的是HTML5中的<audio>html
屬性 | 值 | 描述 |
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推送技術前端的探討。