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

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

 

HTML

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

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

我们用简单的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 {border: 1px solid #390; color:#fff; background: #360;-webkit-border-radius: 3px;
9 -moz-border-radius:3px;padding:5px 8px; cursor:pointer}

 

jQuery

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

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

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库文件是否已经加载。