通过HTML5实现发送声音
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-1.10.2.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } #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; } </style> <script type="text/javascript"> $(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(); //播放声音 } }); }); </script> </head> <body> <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> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。