我们在项目中经常需要播放特定的声音,比如有新消息或者在线聊天消息声音提示,今天我们将使用jQuery和HTML5结合示例来制作声音提示,你可以很方便的应用到你的项目中。
HTML
<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>你好,朋友!素材火sucaihuo.com欢迎你.</span>
</li>
</ul>
</div>
<input type="text" id="chatData" placeholder="Message" />
<input type="button" value=" 发送 " id="trig" />
</div>
jQuery
$(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();
}
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791