<!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. CentOS6.5 python 2.6升级到2.7

    在CentOS6.5下,将自带的python2.6.6升级到python2.7.3,解决方法如下: 下载python2.7.3包,并解压缩,输入命令:#wget http://python.org/f ...

  2. POJ C++程序设计 编程作业—类和对象 编程题 ＃2

    编程题 #2 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 下面程序的输出 ...

  3. Data Mover Script Templates

    Datamover is probably the best way to export and import data between PeopleSoft databases and the sc ...

  4. 设置trace SQL

    Select PeopleTools, Utilities, Debug, Trace SQL to access the Trace SQL page. You use this page to c ...

  5. silverlight水印

    1.自定义类 using System; using System.Net; using System.Windows; using System.Windows.Controls; using Sy ...

  6. Java实现抽奖游戏

    代码如下: import java.io.*; public class PresentDemo { /** * @param args */ public static void main(Stri ...

  7. 类似桌面背景壁纸随手指滑动--第三方开源--BackgroundViewPager

    Android BackgroundViewPager在github上的项目主页是:https://github.com/MoshDev/BackgroundViewPager 下载下来即可运行

  8. scala实现kmeans算法

    算法的概念不做过都解释,google一下一大把.直接贴上代码,有比较详细的注释了. 主程序: import scala.io.Source import scala.util.Random /** * ...

  9. ng-summit and $watch() funciton

    <div ng-app> <form ng-submit="requestFunding()" ng-controller="StartUpContro ...

  10. jQuery学习笔记(2)

    val() 当鼠标放上去的时候,文本消失,鼠标拿开,文本恢复 效果图: code as below: <html xmlns="http://www.w3.org/1999/xhtml ...