演示案例要完成的效果

实现步骤：

• 梳理案例的代码结构
• 将用户输入的内容渲染到聊天窗口
• 发起请求获取聊天消息
• 将机器人的聊天内容转为语音
• 通过 <audio> 播放语音
• 使用回车键发送消息

梳理案例的代码结构

1. 梳理页面的 UI 布局
2. 将业务代码抽离到 chat.js 中
3. 了解 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>')
    resetui() // 重置滚动条的位置
    $('#ipt’).val('') // 清空输入框的内容

    // TODO: 发起请求，获取聊天消息
})

发起请求获取聊天消息

function getMsg(text) {
    $.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
                $('#talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>' + msg + '</span></li>')
                    // 重置滚动条的位置
                resetui()
                    // 调用 getVoice 函数，把文本转化为语音

            }
        }
    })
}`

将机器人的聊天内容转为语音

 function getVoice(text) {
        $.ajax({
            type: 'GET',
            url: 'http://www.liulongbin.top:3006/api/synthesize',
            data: {
                text: text
            },
            success: function(res) {
                console.log(res);
                // 如果请求成功，则 res.voiceUrl 是服务器返回的音频 URL 地
                if (res.status === 200) {
                    $('#voice').attr('src', res.voiceUrl)
                }
            }
        })
    }

通过 播放语音

<!-- 音频播放语音内容 -->
<audio src="" id="voice" autoplay style="display: none;"></audio>

使用回车发送消息

// 让文本输入框响应回车事件后，提交消息
$('#ipt').on('keyup', function (e) {
    // e.keyCode 可以获取到当前按键的编码
    if (e.keyCode === 13) {
        // 调用按钮元素的 click 函数，可以通过编程的形式触发按钮的点击事件
        $('#btnSend').click()
    }
})