通过HTML5实现发送声音
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <! 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 > |
中山赢友网络科技有限公司(http://www.winu.net/)承接IOS、Android、Window Phone 8+、Window 10 App应用开发,IOS、Android、Window Phone 8+游戏开发,.NET/PHP软件系统开发,HTML5网站、游戏、微官网开发。欢迎致电:0760-88809987、18676265646 陈先生。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用