<!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>

通过HTML5实现发送声音的更多相关文章

  1. HTML5服务器发送事件(Server-Send Events)

    HTML5服务器发送事件是允许获得来自服务器的更新. server-sent事件-单向传递消息,表示网页自动获取来自服务器的更新. 其中有一个重要的对象,eventsource对象是用来接收服务器发送 ...

  2. HTML5 服务器发送事件(Server-Sent Events)

    沈阳SEO:HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获 ...

  3. HTML5: HTML5 服务器发送事件(Server-Sent Events)

    ylbtech-HTML5: HTML5 服务器发送事件(Server-Sent Events) 1.返回顶部 1. HTML5 服务器发送事件(Server-Sent Events) HTML5 服 ...

  4. Server-Sent Events（HTML5 服务器发送事件）

    Server-Sent Events简介 Server-Sent Events(SSE)用于网页自动获取服务器上更新的数据,它是一个实时性的机制. 实时性获取数据的解决方案 对于某些需要实时更新的数据 ...

  5. HTML5 服务器发送事件(Server-Sent Events)介绍

    w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...

  6. 关于HTML5服务器发送事件(SSE)

    最近在看 W3School 上关于 HTML 5 的教程.在看到 HTML 5 服务器发送事件 ( SSE, server-sent event ) 时,没怎么弄明白示例代码是怎么回事,寻找其他教程, ...

  7. HTML5学习笔记（七）HTML5 服务器发送事件(Server-Sent Events)

    Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能够自动到达. EventSource 对象用于接 ...

  8. [ASP.NET MVC] Real-time之HTML5 服务器发送事件（server-sent event）

    最近有时间,打算看看SignalR,顺便了解一下Server Sent Events. Controller 输出的数据格式为:data:[数据]\n\n.输出的数据尝试8000多字符也没问题,具体的 ...

  9. HTML5 服务器发送事件

    单向传输:服务器端——>客户端   作用:传回的能每过3s重新刷新一遍.从而能过跟数据库同步,与ajax配合使用   一.客户端写法 必须的用 message 方法   JSON.parse() ...

随机推荐

  1. 二、搭建struts2的开发环境

    二.搭建struts2的开发环境 下载地址:http://struts.apache.org 解压后的目录结构: apps:框架本身提供一些案例(学习) docs:框架本身提供的文档(指南和API). ...

  2. Java中join的使用

    join用于主线程等待子线程运行完毕它的run方法,再继续执行下面的代码. join() = join(0),主线程无限等待子线程执行完毕. join(n milliseconds),主线程只等待n毫 ...

  3. JS数组(Array)处理函数总结

    1.concat() 连接两个或更多的数组该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.例如: <script type="text/javascript"&g ...

  4. Windows2003 Apache 关闭安全 开启错误输入到屏幕上

    早上帮客户迁移网站的时候发现,打开网站是空白,什么都没报错,环境也是自己配置的,在客户的网站主目录写个测试页也可以打开,环境是APache+PHP5.2的新环境,当时就有点郁闷了,去Apache的er ...

  5. IE9 以下版本浏览器兼容HTML5的方法，使用百度静态资源的html5shiv包

    <!--[if lt IE9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.j ...

  6. C# winform combobox控件中子项加删除按钮(原创)

    效果如下图,本人网上搜索资料加上自己的研究终于实现了在combobox子项中加上删除按钮. 一.窗体中的代码: using System; using System.Collections.Gener ...

  7. Redis监控方案

    Redis 监控最直接的方法当然就是使用系统提供的 info 命令来做了,你只需要执行下面一条命令,就能获得 Redis 系统的状态报告. redis-cli info 内存使用 如果 Redis 使 ...

  8. DTD 知识归纳总结

    一:在xml文件中引用一个dtd规则. <!DOCTYPE 根元素 [元素声明]> 二: xml文档中中包含的内容模块 元素:元素是 XML 以及 HTML 文档的主要构建模块. 属性:属 ...

  9. Mysql导入导出 改密命令总结(笔记三)

    一.从数据库导出数据 注意这些语句的执行是在在没进入mysql命令行之前,在mysql命令行不行 C:\Windows\system32>导出命令 而不是 Mysql>导出命令 1.导出整 ...

  10. PHP多例模式

    学习java就知道设计模式中有多例模式: 1.多例类可以有多个实例2.多例类必须能够自我创建并管理自己的实例,并向外界提供自己的实例. 大家都知道PHP单例模式,却很少说PHP多例模式,下面是在wik ...