在應(yīng)用系統(tǒng)的開(kāi)發(fā)過(guò)程中，經(jīng)常要使用到新消息的提醒功能，比如說(shuō)后臺(tái)有一個(gè)告警消息，web頁(yè)面就會(huì)實(shí)時(shí)的收到這個(gè)告警的消息，且發(fā)出提示音。

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

標(biāo)簽的屬性

屬性

值

描述

autoplay

autoplay

如果出現(xiàn)該屬性，則音頻在就緒后馬上播放

controls

controls

如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。

loop

loop

如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放。

preload

preload

如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放

如果使用 "autoplay"，則忽略該屬性。。

src

url

要播放的音頻的 URL。

由于我們的播放聲音要用js控制，我們查閱w3school可以看到以下的內(nèi)容，

關(guān)于audio的詳細(xì)網(wǎng)址如下：

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

1.第一個(gè)嘗試的方法

可以看到我們只要調(diào)用play()函數(shù)就可以播放音頻文件了，所以代碼如下：

HTML>

function?autoPlay(){

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

myAuto.play();

}

看似只要點(diǎn)擊就會(huì)播放聲音，但是有個(gè)bug，只要點(diǎn)擊按鈕就會(huì)播放聲音，但是有個(gè)問(wèn)題是一首歌沒(méi)播放完，你就點(diǎn)擊，他是沒(méi)有反應(yīng)，不會(huì)再?gòu)念^播放，只到把這個(gè)播放完了才又開(kāi)始。

而且在這而沒(méi)有問(wèn)題，加到項(xiàng)目中在谷歌瀏覽器下，要刷新兩次，才能實(shí)現(xiàn)每次點(diǎn)擊，播放音樂(lè)。

2.改進(jìn)

后來(lái)根據(jù)其屬性進(jìn)行了改進(jìn)，因?yàn)橛幸粋€(gè)autoplay屬性，這樣每次點(diǎn)擊的時(shí)候，我們讓其src指向我們的音樂(lè)文件，這樣就可以實(shí)現(xiàn)每次點(diǎn)擊就從頭播放音樂(lè)文件了，代碼如下：

HTML>

function?autoPlay(){

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

myAuto.src="abc.mp3";?//注意這兒是所指向的src,然后下面有一個(gè)autoplay屬性，只要準(zhǔn)備就緒，就播放，所以每次從頭開(kāi)始，因?yàn)槊看螐姆?wù)器下載過(guò)來(lái)就播放

}

最后貼一下我的ajax實(shí)現(xiàn)的web頁(yè)面的消息實(shí)時(shí)提醒提示音的綜合代碼如下：

ajax實(shí)現(xiàn)的長(zhǎng)輪詢

function?longPolling()

{

$.ajax({

type:"POST",

url:"/nms/push",

timeout:30000,??//超時(shí)時(shí)間30秒，30秒內(nèi)沒(méi)有完成請(qǐng)求，則取消請(qǐng)求然后error回調(diào)函數(shù)會(huì)被調(diào)用

success:function(data,textStatus){??//返回的回調(diào)函數(shù)

if(textStatus=="success")//狀態(tài)碼為200,完全成功才響起提示音

{

playsound();

}

//也有狀態(tài)碼為204,也是success回調(diào)函數(shù)，但是textStatus==nocontent

longPolling();?????//再發(fā)起一個(gè)連接請(qǐng)求

},

error:function(XMLHttpRequest,?textStatus,?errorThrow){

if(textStatus=="timeout")??//請(qǐng)求超時(shí)

{

longPolling();

}

else??????//?其他錯(cuò)誤，如網(wǎng)絡(luò)錯(cuò)誤等

{

longPolling();

}

}

});

}

//響起提示音

function?playsound()

{

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

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

}

下一篇文章將會(huì)總結(jié)http推送技術(shù)前端的探討。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。