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

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

標簽的屬性

屬性

值

描述

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()函數就可以播放音頻文件了，所以代碼如下：

HTML>

function?autoPlay(){

var?myAuto?=?document.getElementById('myaudio');

myAuto.play();

}

看似只要點擊就會播放聲音，但是有個bug，只要點擊按鈕就會播放聲音，但是有個問題是一首歌沒播放完，你就點擊，他是沒有反應，不會再從頭播放，只到把這個播放完了才又開始。

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

2.改進

后來根據其屬性進行了改進，因為有一個autoplay屬性，這樣每次點擊的時候，我們讓其src指向我們的音樂文件，這樣就可以實現每次點擊就從頭播放音樂文件了，代碼如下：

HTML>

function?autoPlay(){

var?myAuto?=?document.getElementById('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){

if(textStatus=="timeout")??//請求超時

{

longPolling();

}

else??????//?其他錯誤，如網絡錯誤等

{

longPolling();

}

}

});

}

//響起提示音

function?playsound()

{

var?myAuto?=?document.getElementById('myaudio');

myAuto.src="/sound/abc.mp3";

}

下一篇文章將會總結http推送技術前端的探討。

總結

以上是生活随笔為你收集整理的html 消息通知声音,ajax实现web页面的消息实时提醒时播放提示音的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。