在家是否感到空虚寂寞无聊呢🤔

别怕！

今天我就要带来一个带你消遣时光的陪聊！

她可以陪你谈天说地，你有什么需要她帮助的话她也会尽自己的能力来帮助你！

<body>
    <div class="wrap">
        <!-- 头部 Header 区域 -->
        <div class="header">
            <h3>小思同学</h3>
            <img src="img/person01.png" alt="icon" />
        </div>
        <!-- 中间 聊天内容区域 -->
        <div class="main">
            <ul class="talk_list" style="top: 0px;" id="talk_list">
                <li class="left_word">
                    <img src="img/person01.png" /> <span>hi!我是你的助手siri。有什么我能帮助你的吗？</span>
                </li>
                <!-- <li class="right_word">
                    <img src="img/person02.png" /> <span>你好哦</span>
                </li> -->
            </ul>
            <div class="drag_bar" style="display: none;">
                <div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
            </div>
        </div>
        <!-- 注意：只要为了audio指定了新的src属性，并且指定了autoplay，那么语音就会自动播放 -->
        <audio src="" id="voice" autoplay style="display:none;"></audio>
        <!-- audio标签让机器人自动播放所出现的文字 -->
        <!-- 底部 消息编辑区域 -->
        <div class="footer">
            <img src="img/person02.png" alt="icon" />
            <input type="text" placeholder="说的什么吧..." class="input_txt" id="ipt" />
            <input type="button" value="发 送" class="input_sub" id="btnSend" />
        </div>
    </div>
    <script type="text/javascript" src="js/scroll.js"></script>
    <script src="js/chat.js"></script>
</body>

Step2：在js文件中实现动态效果

$(function() {
    // 初始化右侧滚动条--当发送一个消息滚动条就能滑倒底端
    // 这个方法定义在scroll.js中

    resetui()

    $("#btnSend").on("click", function() {
        var text = $("#ipt").val().trim();
        if (text.length <= 0) {
            return $("#ipt").val('') //如果输入框的内容为空格/空就清空文本框里面的内容
        } //如果用户输入了内容进去就进行追加
        $("#talk_list").append('<li class="right_word"><img src="img/person02.png" /> <span>' + text + '</span></li>');
        $("#ipt").val('');
        // 重置滚动条的位置
        resetui(); //直接写函数名就即可调用了
        // 发起请求，获取聊天的内容跟
        getMsg(text)
    })

    // 获取聊天机器人发送回来的消息
    function getMsg(text) { //获取到用户输入的text内容
        // 然后发起Ajax请求
        $.ajax({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/robot',
            data: {
                spoken: text
            },
            success: function(res) {
                // console.log(res);
                if (res.message === 'success') {
                    // 接收聊天消息
                    var msg = res.data.info.text; //msg就是机器人渲染到页面的文字
                    // 渲染到页面上
                    $("#talk_list").append('<li class="left_word"><img src="img/person01.png" /> <span>' + msg + '</span></li>');
                    // 重置滚动条
                    resetui();
                    // 调用下面的语音函数--文本转换为语音
                    getVoice(msg);
                }
            }

        })

    }

    // 把文字转换成语音效果
    function getVoice(text) { //text就是想把文本转换成语音的效果
        $.ajax({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/synthesize',
            data: {
                text: text //text就是外界传输进来的文本
            },
            success: function(res) {
                console.log(res);
                if (res.status === 200) {
                    // 播放语音
                    $("#voice").attr('src', res.voiceUrl); //voiceUrl是服务器返回的音频url地址
                }
            }
        })
    }

    // 当用户按下enter键就能发送信息（此时鼠标聚焦在文本框里）
    // 给文本框绑定keyup事件
    $("#ipt").on("keyup", function(e) {
        // console.log(e.keyCode);
        if (e.keyCode === 13) {
            // 当用户按了enter回车键就触发了发送按钮就发送信息了
            $("#btnSend").click()
        }
    })

})

在Step2中主要是：