赢友网络

通过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>

 

posted @   新生帝  阅读(742)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 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 构建精确任务处理应用
赢友网络
点击右上角即可分享
微信分享提示