jQuery+HTML5聲音提示

WEB應用中，有時需要播放特定的聲音，比如有新消息或者在線聊天消息聲音提示，以前我們通過flash實現，今天我們將使用jQuery和HTML5結合示例來實現如何把聲音提示帶入WEB應用中。

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

 

HTML

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

<div id="chatBox">
  <div 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>
  </div>
  <input type="text" id="chatData" placeholder="Message" />
  <input type="button" value=" 發送 " id="trig" />
</div>

 

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預加載聲音文件到頁面中。關於audio的相關知識，大家可以參照本站文章： 使用HTML5的Audio標簽打造WEB音頻播放器

當用戶在輸入框中輸入完信息，點擊發送按鈕，信息將插入到聊天內容區，並調整聊天區滾動條高度，同時播放聲音，請看代碼及注釋。

$(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();//獲取輸入的內容
    if(a.length > 0){
      $("#chatData").val(''); //清空輸入框
      $("#chatData").focus(); //獲得焦點
      $("<li></li>").html('<img src="qq.gif"/><span>'+a+'</span>')
            .appendTo("#chatMessages");//將輸入的內容追加的聊天區
      $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");//調整滾動條
      $('#chatAudio')[0].play(); //播放聲音
    }
  });
});

 

最后提醒下，不要忘了在html中先載入jQuery庫文件，這是很多同學問到的問題，再次提醒如果下載本站的文件后在本地運行看不到效果的，請先檢查下jQuery庫文件是否已經加載。helloweba.com感謝您的關注。