jQuery+HTML5实现WEB应用中的声音提示

WEB应用中,有时需要播放特定的声音,比如有新消息或者在线聊天消息声音提示,以前我们通过flash实现,今天我们将使用jQuery和HTML5结合示例来实现如何把声音提示带入WEB应用中。

在本例中,我们基于一个简易的WEB在线聊天应用为背景,当输入完信息点“发送”按钮后,信息将出现在聊天框中,并发出提示声音。本例依赖jQuery,以及支持HTML5的audio技术,所以什么IE6,7,8可以洗洗先睡了。

HTML

页面主体是一个聊天框#chatBox,由上部分聊天内容区#chat和下部分内容输入操作区组成,聊天内容以列表的形式展示在#chatMessages中。

CSS

  1. <div id="chatBox"> 
  2.     <div id="chat"> 
  3.         <ul id="chatMessages"> 
  4.             <li> 
  5.                 <img src="user.gif"/><span>Hello Friends</span> 
  6.             </li> 
  7.             <li> 
  8.                 <img src="user.gif"/><span>你好,朋友!Helloweba.com欢迎你.</span> 
  9.             </li> 
  10.         </ul> 
  11.     </div> 
  12.     <input type="text" id="chatData" placeholder="Message" /> 
  13.     <input type="button" value=" 发送 " id="trig" /> 
  14. </div> 

我们用简单的CSS来美化HTML。

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

jQuery

首先需要载入声音文件,我们使用HTML5标签<audio>,通过source预加载声音文件到页面中。关于audio的相关知识,大家可以参照本站文章:

当用户在输入框中输入完信息,点击发送按钮,信息将插入到聊天内容区,并调整聊天区滚动条高度,同时播放声音,请看代码及注释。

  1. $(function(){  
  2.     $("#chatData").focus();//输入框获得焦点 
  3.     $('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"
  4.     <source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"
  5.     </audio>').appendTo('body');//载入声音文件 
  6.  
  7.     $("#trig").click(function(){ 
  8.         var a = $("#chatData").val().trim();//获取输入的内容 
  9.         if(a.length > 0){ 
  10.             $("#chatData").val(''); //清空输入框 
  11.             $("#chatData").focus(); //获得焦点 
  12.             $("<li></li>").html('<img src="qq.gif"/><span>'+a+'</span>'
  13.             .appendTo("#chatMessages");//将输入的内容追加的聊天区 
  14.             $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");//调整滚动条 
  15.             $('#chatAudio')[0].play(); //播放声音 
  16.         } 
  17.     }); 
  18. }); 

最后提醒下,不要忘了在html中先载入jQuery库文件,这是很多同学问到的问题,再次提醒如果下载本站的文件后在本地运行看不到效果的,请先检查下jQuery库文件是否已经加载。helloweba.com感谢您的关注。

转载请注明:代码家园 » jQuery+HTML5实现WEB应用中的声音提示

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)