一、前言

520情人节快到了，上次这么无论的时候还是在上次，
无聊中在网上发现个有趣的接口，是一个会自动回复语音的智能机器人接口，
终于我也有了甜甜的聊天了...

二、功能分析

主要是调用了一个可以自动回复的接口，我把它做成了一个类似微信聊天的页面，功能是往输入框输入内容，用鼠标点击或者直接回车就可以发送消息，然后接口机器人会根据你输入的内容做一个自动文字回复，还能进行语音自动播放。

这个自动回复接口有趣的地方主要在于你可以输入任何内容，智能接口总是可以给你回复一些你意想不到的回复，大家有什么新奇的想法都可以往对话框里面输入，回复完内容以后，还会自动播放甜甜的语音~~

由于时间问题，还有很多功能可以完善，没有考虑去做优化，主要是用这个接口娱乐一下，希望各位大佬莫要嘲笑，接下来就直接上代码了。

css样式

    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 100px auto;
            position: relative;
            width: 350px;
            height: 580px;
            border: 1px solid #f5e4e4;
            box-sizing: border-box;
            background-color: #ededed;
        }
        .bottom{
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            width: 100%;
            height: 40px;
            background-color: #f7f7f7;
            justify-content:space-evenly;
            align-items: center;
        }
        .speak{
           font-size: 25px;
        }
        .emo{
           font-size: 25px;
        }
        input{
            width: 200px;
            height: 33px;
            border-radius: 5px;
            background-color: #fff;
            border: none;
            outline: none;
        }
        button{
            width: 60px;
            height: 33px;
            border-radius: 5px;
            background-color:#07bf61;
            color: #f7fdfb;
            border: none;
        }
        ul{
            list-style: none;
            height: 54px;
        }
        img{
            width: 45px;
            height: 45px;
            border-radius: 5px;
        }
        li{
            display: flex;
            align-items:center;
            position: relative;
        }
        .rightposition{
            display: flex;
            justify-content: flex-end;
            position: relative;
        }
      
       .content{
           position: relative;
           text-align: center;
           padding: 5px;
           margin-right: 10px;
           margin-top: 28px;
           border-radius: 3px;
           vertical-align: middle;
           border: none;
           background-color: #95ec69;
       }
       .content::after{
           content: '';
           position: absolute;
           top: 3px;
           right: -15px;
           border-left: 10px solid #95ec69;
           border-top: 10px solid transparent;
           border-right: 10px solid transparent;
           border-bottom: 10px solid transparent;
       }
       .resContent{
           position: relative;
           text-align: center;
           padding: 5px;
           margin-right: 10px;
           margin-top: 28px;
           border-radius: 3px;
           vertical-align: middle;
           border: none;
           background-color: #fff;
       }
       .resContent::after{
           content: '';
           position: absolute;
           top: 3px;
           left: -15px;
           border-left: 10px solid transparent;
           border-top: 10px solid transparent;
           border-right: 10px solid #fff;
           border-bottom: 10px solid transparent;
       }
       .sendright{
            display: flex;
            align-items:center;
        
       }
       audio{
           display: none;
       }
       .top{
           box-sizing: border-box;
           display: flex;
           justify-content:space-between;
           align-items: center;
           padding: 5px;
           width: 100%;
           height: 45px;
           border-bottom: 1px solid #e6e5e5;
           background-color: #ededed;
           color:#232323;
           font-weight: 700;
       }
       .top span{
           color: black;
       }
       .user{
          width: 40px;
          height: 40px;
       }
       .arrow{
           display: inline-block;
           font-size: 20px;
       }
       .point{
           display: inline-block;
           font-size: 25px;
       }
      
    </style>

HTML部分

    <audio src="" controls autoplay></audio>
    <div class="box">
     
    <!-- 顶部 -->
    <div class="top">
        <span class="iconfont icon-zuojiantou arrow"></span>
        <p>宝贝</p>
        <span class="iconfont icon-gengduo point"></span>
    </div>  
    
    <!-- 内容 -->
      <ul></ul>

      <!-- 底部 -->
     <div class="bottom">
        <span class="iconfont icon-yuyin speak"></span>
        <input type="text">
        <span class="iconfont icon-xiaolian emo"></span>
        <button>发送</button>
     </div>   
    </div>

JS部分

    <script src="./axios.js"></script>
    <script>
            const btn = document.querySelector('button')
            const input = document.querySelector('input')
            const ul = document.querySelector('ul')
            const response = document.querySelector('.response')
            const box =document.querySelector('.box')
            const audio = document.querySelector('audio')
            
            // 获得焦点
            input.focus()

            // 回车 触发
            input.addEventListener('keydown', function (event) {
                    if (event.key === 'Enter') {
                        // trim() 去除 输入框的值 的两侧的 空字符串
                        const value = this.value.trim(); 
                        if (value) {
                            console.log('不是空字符串');

                            let liHtml = `
                                <li class="rightposition">
                                <div class="sendright">    
                                <div class="content">${input.value}
                                </div>    
                                <div class="info">
                                  <img class="userpic" src="./11.jpg" />
                                </div>
                                </div>
                                </li>
                                    `
                            ul.innerHTML += liHtml

                            // 文本
                            const txt = input.value
                            getMsg(txt)

                            btn.blur();
                            input.value = ''
                        } else {
                            console.log(123);
                        }
                    }
                });

            // 点击触发
            btn.addEventListener('click', function () {
                console.log('123');
            let liHtml = `
            <li class="rightposition">
            <div class="sendright">    
            <div class="content">${input.value}
            </div>    
            <div class="info">
              <img class="userpic" src="./11.jpg" />
            </div>
            </div>
            </li>
                `
            ul.innerHTML += liHtml     
             
            // 文本
            const txt = input.value
            getMsg(txt)

            // 失焦
            btn.blur();
            input.value=''
        })
            
        //文字
        function getMsg(txt) {
            axios.get('http://www.liulongbin.top:3009/api/robot?', { params: { spoken: txt } })
                .then(result => {
                    const msg =  result.data.data.info.text
                    console.log(msg);
                    let resHtml = `
                        <li>
                        <div class="resInfo">
                        <img class="userpic" src="./09.jpg" />
                        </div>
                        <div class="resContent">${msg}
                        </div>    
                        </li>
                            `
                    ul.innerHTML += resHtml   
                    getVoice(msg)
                }
        )}

        //语音部分
        function getVoice(msg){
            axios.get('http://www.liulongbin.top:3009/api/synthesize', { params: { text: msg } })
            .then(result=>{
                const vioceUrl = result.data.voiceUrl
                audio.src = vioceUrl
            })
        }
    </script>