jQuery+HTML5實現(xiàn)聲音提示效果

本篇內(nèi)容主要講解“jQuery+HTML5實現(xiàn)聲音提示效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“jQuery+HTML5實現(xiàn)聲音提示效果”吧!

在本例中，我們基于一個簡易的WEB在線聊天應(yīng)用為背景，當輸入完信息點“發(fā)送”按鈕后，信息將出現(xiàn)在聊天框中，并發(fā)出提示聲音。本例依賴jQuery，以及支持HTML5的audio技術(shù)，所以什么IE6,7,8可以洗洗先睡了。

HTML

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

<p id="chatBox"> <p id="chat"> <ul id="chatMessages"> <li> <img src="user.gif"/><span>Hello Friends</span> </li> <li> <img src="user.gif"/><span>你好，朋友！Helloweba.com歡迎你.</span> </li> </ul> </p> <input type="text" id="chatData" placeholder="Message" /> <input type="button" value=" 發(fā)送 " id="trig" /> </p>

CSS

我們用簡單的CSS來美化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

首先需要載入聲音文件，我們使用HTML5標簽<audio>,通過source預(yù)加載聲音文件到頁面中。關(guān)于audio的相關(guān)知識，大家可以參照本站文章：使用HTML5的Audio標簽打造WEB音頻播放器

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

$(function(){ $("#chatData").focus();//輸入框獲得焦點 $('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg">    <source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav">    </audio>').appendTo('body');//載入聲音文件 $("#trig").click(function(){ var a = $("#chatData").val().trim();//獲取輸入的內(nèi)容 if(a.length > 0){ $("#chatData").val(''); //清空輸入框 $("#chatData").focus(); //獲得焦點 $("<li></li>").html('<img src="qq.gif"/><span>'+a+'</span>')            .appendTo("#chatMessages");//將輸入的內(nèi)容追加的聊天區(qū) $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");//調(diào)整滾動條 $('#chatAudio')[0].play(); //播放聲音 } }); });

最后提醒下，不要忘了在html中先載入jQuery庫文件，這是很多同學問到的問題，再次提醒如果下載本站的文件后在本地運行看不到效果的，請先檢查下jQuery庫文件是否已經(jīng)加載。

到此，相信大家對“jQuery+HTML5實現(xiàn)聲音提示效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！