jQuery+HTML5声⾳提⽰
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欢迎你.</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的相关知识，⼤家可以参照本站⽂章：
当⽤户在输⼊框中输⼊完信息，点击发送按钮，信息将插⼊到聊天内容区，并调整聊天区滚动条⾼度，同时播放声⾳，请看代码及注释。
1 $(function(){
2  $("#chatData").focus();//输⼊框获得焦点
3  $('<audio id="chatAudio"><source src="" 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(){
8var a = $("#chatData").val().trim();//获取输⼊的内容
jquery滚动条滚动到底部9if(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感谢您的关注。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。