使用JS实现一个会语音的聊天机器人

我使用的是黑马程序员的API接口（小思同学），在此鸣谢，我们今天从第一步到最后一步解析机器人的制作，该API接口免费，请大家妥善处置！！

可以实现实时交互文字以及语音聊天功能

一.准备工作

我们需要准备俩个接口和API文档在代码中已经书写

二.HTML架构

    
    
    
    
    
    
    


    


    
    

        
小思同学
    

    
    

        
        

            

            
你好
            
        

    

    
    

        
        S
    

    
    

三.CSS

*{
    margin: 0;
    padding: 0;
    font-family: '幼圆';
    box-sizing: border-box;
}
img{
    width: 100%;
    height: 100%;
}
ul{
    list-style: none;
}
.max-box{
    position: relative;
    width: 100%;
    height: 100vh;
}
.information-box{
    position: sticky;
    top: 0;
    width: 100%;
    height: 10vh;
    background-color: #333333;
    z-index: 99;
}
.information-box h2{
    color: #fff;
    line-height: 10vh;
    text-align: center;
}
.news-box{
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 10vh;
    background-color: #333333;
    border: 2px double #000;
    padding: 1vh;
}
.news-box input{
    flex: 8;
    outline: none;
    font-size: 30px;
}
.news-box button{
    flex: 2;
    background-color: #75d45d;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.left-news,
.right-news{
    position: relative;
    display: block;
    width: 100%;
    height: 12vh;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: transparent;
    padding: 1vh;
    margin-bottom: 6vh;
}
.neirong ul:last-of-type{
    margin-bottom: 0;
}
.left-news .one-li,
.right-news .one-li{
    display: inline-block;
    width: 10vh;
    height: 10vh;
    border-radius: 10px;
    overflow: hidden;
}
.left-news .two-li,
.right-news .two-li{
    display: inline-block;
    position: absolute; 
    top: 0; 
    height: 10vh;
    top: 0;
    background-color: #eeeeee;
    border-radius: 10px;
    text-align: center;
    line-height: 10vh;
    font-size: 20px;
    font-weight: bold;
    margin-left: 2vh;
    margin-right: 2vh;
    margin-top: 1vh;
    padding-left: 2vh;
    padding-right: 2vh;
}
.right-news .one-li{
    position: absolute;
    right: 1vh;
}
.right-news .two-li{
    position: absolute;
    right: 12vh;
    background-color: #0f0f0f;
    color: #fff;
}
.neirong{
    padding-bottom: 10vh;
    background-color: #fff;
}

四.JS-jQuery-Ajax

$(function(){
    //封装用户输入函数
    function getnews(){
         //获取用户输入的值
        var text = $("input").val().trim();
        //判断输入值是否为空
        if(text.length <= 0){
            return $("input").val("");
        }else{
            //不为空追加数据
            $(".neirong").append('
' + text + '
');
            $("input").val("");
            getMsg(text);
        }
    }
   

    //绑定点击事件
    $("button").on("click",function(){
        getnews();
    })
    //绑定回车键盘事件
    $(document).on('keyup',function(event){
        if(event.keyCode === 13){
            getnews();
        }
    })

    //获取聊天机器人的消息
    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;
                    $(".neirong").append('
' + msg + '
');
                    getVoice(msg);
                }
            }
        })
        //文字转音频
        function getVoice(msg){
            $.ajax({
                method:'GET',
                url:'http://www.liulongbin.top:3006/api/synthesize',
                data:{
                    text:msg
                },
                success:function(res){
                    // console.log(res);
                    if(res.status === 200){
                        $("audio").attr('src',res.voiceUrl);
                    }
                }
            })
        }
    }
})

API接口由黑马提供

学习前端。关注小蜗