WEB應用中，有(yǒu)時(shí)需要播放特定的聲音(yīn)，比如有(yǒu)新消息或者在線聊天消息聲音(yīn)提示，以前我們通(tōng)過flash實現，今天我們将使用jQuery和(hé)HTML5結合示例來(lái)實現如何把聲音(yīn)提示帶入WEB應用中。

在本例中，我們基于一個(gè)簡易的WEB在線聊天應用為(wèi)背景，當輸入完信息點“發送”按鈕後，信息将出現在聊天框中，并發出提示聲音(yīn)。本例依賴jQuery，以及支持HTML5的audio技(jì)術(shù)，所以什麽IE6,7,8可(kě)以洗洗先睡了。

HTML

頁面主體(tǐ)是一個(gè)聊天框#chatBox，由上(shàng)部分聊天內(nèi)容區(qū)#chat和(hé)下部分內(nèi)容輸入操作(zuò)區(qū)組成，聊天內(nèi)容以列表的形式展示在#chatMessages中。

	
	

		
		

			
			

				Hello Friends 
			

			

				你(nǐ)好，朋友(yǒu)！Helloweba.com歡迎你(nǐ). 
			

		

	

CSS

我們用簡單的CSS來(lái)美化HTML。

#chatBox{width:400px;border:1px solid #d3d3d3;margin:50px auto;}
#chat {max-height:220px;overflow-y:auto;max-width:400px;}
#chat > ul > li{padding:3px;clear:both;padding:4px;margin:10px 0px 5px 0px;overflow:auto}
#chatMessages{list-style:none}
#chatMessages > li > img{width:35px;float:left}
#chatMessages > li > span{width:300px;float:left;margin-left:5px}
#chatData{padding:5px;margin:5px;border-radius:5px;border:1px solid #999;width:300px}
#trig {border: 1px solid #390; color:#fff; background: #360;-webkit-border-radius: 3px;
-moz-border-radius:3px;padding:5px 8px; cursor:pointer}

jQuery

首先需要載入聲音(yīn)文件，我們使用HTML5标簽,通(tōng)過source預加載聲音(yīn)文件到頁面中。關于audio的相關知識，大(dà)家(jiā)可(kě)以參照本站(zhàn)文章：使用HTML5的Audio标簽打造WEB音(yīn)頻播放器(qì)

當用戶在輸入框中輸入完信息，點擊發送按鈕，信息将插入到聊天內(nèi)容區(qū)，并調整聊天區(qū)滾動條高(gāo)度，同時(shí)播放聲音(yīn)，請(qǐng)看代碼及注釋。

$(function(){ 
	$("#chatData").focus();//輸入框獲得(de)焦點
	$('').appendTo('body');//載入聲音(yīn)文件

	$("#trig").click(function(){
		var a = $("#chatData").val().trim();//獲取輸入的內(nèi)容
		if(a.length > 0){
			$("#chatData").val(''); //清空(kōng)輸入框
			$("#chatData").focus(); //獲得(de)焦點
			$("

	

").html(''+a+'')
            .appendTo("#chatMessages");//将輸入的內(nèi)容追加的聊天區(qū)
			$("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");//調整滾動條
			$('#chatAudio')[0].play(); //播放聲音(yīn)
		}
	});
});

最後提醒下，不要忘了在html中先載入jQuery庫文件，這是很(hěn)多(duō)同學問到的問題，再次提醒如果下載本站(zhàn)的文件後在本地運行(xíng)看不到效果的，請(qǐng)先檢查下jQuery庫文件是否已經加載。helloweba.com感謝您的關注。