人工智能丰富简单了人们的生活，使人变的更懒，哦不，是让人有更多的时间投入到更加有意义的事情中去，这才是人话，哈哈😄。

介绍

首先请先参观一下我个人所制作的一个电脑端语音万能搜索网站（经过测试 安卓、苹果手机和ipad在麦克风正常的情况下都可使用），网址是 https://search.hello-world.top/ （一句话搜索），左侧下拉框相当于是聚合搜索，未来会加入各大商城、gitee以及github的搜索直达亦或是自定义，敬请期待。

一句话搜索

做这个网站或者是这个功能的初衷就是有一段时间，总是时不时需要搜索一下百度，但是每次也都是搜那为数不多的几个词语，比如想看直播，我直接搜索斗鱼直播了，浏览器存的也有书签，但是书签太多了也懒得找了，因此想做一个这样功能的网站。有了这样一个网站，我只需点点鼠标就可以快速定位我需要浏览的网站或者获取我想要的信息了。

使用流程

1
2
3
4
5
graph LR
    A(开始) -->B(进入一句话搜索网站)
    B -->点击麦克风图标说话 -->C(自动处理)
    C -.识别结果.......自动跳转搜索引擎进行搜索.->D
    D(点击进入目标站点)

当然电脑是需要有麦克风的，识别不到的话网站也是会给予相当人性化的提醒的，不会让你傻乎乎的不知所措。

开发流程

1
2
3
4
5
6
7
graph TD
    A(开始) -->B(进入一句话搜索网站)
    B -->C(点击麦克风图标录音)
    C -.携带语音数据和相关参数.->D(请求自己的语音搜索后台项目)
    D -.携带语音数据和配置参数-> appid 秘钥 以及语音数据.->E(调用百度语音识别API )
    E -.获取识别结果并且返到前台.->F( 前台自动跳转相应搜索引擎进行搜索)
    F -->G(结束)

项目架构以及开发步骤解析

整体项目是前后端分离开发，前端整体采用vue+elementui+axios+iframe，后端整体框架为springboot+redis+swagger

一、前端vue主要页面

  1. 录音插件js-audio-recorder

    ​ 使用文档：https://www.npmjs.com/package/js-audio-recorder （网络稍慢，但是该文档很详细，建议将网页另存为本地学习使用）

  2. 带有语音数据的异步请求

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
let formData = new FormData();
// 录音数据
that.speechData.speech = recorder.getPCMBlob()
formData.append('audio', that.speechData.speech );
this.$http.post(this.asrUrl, formData).then(res => {
				let asrStr = res.data.result
				that.searchInput = asrStr.indexOf("。" ) > 0 ? asrStr.substr(0, asrStr.lastIndexOf("。")) : asrStr
				console.log('searchInput', that.searchInput, 'asrStr', asrStr)
				if (asrStr) {
					Notification.success({
						title: '成功',
						message: '识别成功，正在为您搜索',
						showClose: false
					});
					that.search();
				}else {
					Notification.warning({
						title: '错误',
						message: '没有识别到内容，停止搜索！',
						showClose: false
					});

				}
			}).catch(function (error) {
				that.$message(
						{
							showClose: true,
							message: "服务器网络连接失败！",
							type: 'error'
						}
				)
				console.log(error)
			})

二、后端java

2.1 配置百度语音技术api

  1. 参考百度语音技术api调用文档 https://ai.baidu.com/ai-doc/SPEECH/pk4o0bkx8

主要是添加依赖，配置在百度开发者平台创建的应用的相关信息（APPID、API_KEY、SECRET_KEY）

1
2
3
4
5
<dependency>
    <groupId>com.baidu.aip</groupId>
    <artifactId>java-sdk</artifactId>
    <version>4.15.1</version>
</dependency>

2.2 配置前后端接口访问

  1. java后台配置允许跨域请求 （前后端分离造成的跨域）

    在Controller或者方法上加入@CrossOrigin("*")注解即可声明为此类所有方法或者指定方法为跨域可访问

  2. java后台项目配置允许https访问 （浏览器页面要进行录音、录像等操作时必须需要访问协议为https协议）

    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
    54
    55
    56
    package cn.leesin.baidu.ai.config;

    import org.apache.catalina.Context;
    import org.apache.catalina.connector.Connector;
    import org.apache.tomcat.util.descriptor.web.SecurityCollection;
    import org.apache.tomcat.util.descriptor.web.SecurityConstraint;
    import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
    import org.springframework.boot.web.servlet.server.ServletWebServerFactory;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;

    @Configuration
    public class HttpsRequestConfig {

        /*
         *@Description  所有请求全部转换成https
         *@params 
         *@Return org.springframework.boot.web.servlet.server.ServletWebServerFactory
         *@Author leesin
         *@Date 2020/10/24  11:08
         */
        @Bean
        public ServletWebServerFactory servletContainer() {
            TomcatServletWebServerFactory tomcat = new TomcatServletWebServerFactory() {
                @Override
                protected void postProcessContext(Context context) {
                    SecurityConstraint securityConstraint = new SecurityConstraint();
                    securityConstraint.setUserConstraint("CONFIDENTIAL");
                    SecurityCollection collection = new SecurityCollection();
                    collection.addPattern("/*");
                    securityConstraint.addCollection(collection);
                    context.addConstraint(securityConstraint);
                }
            };
            tomcat.addAdditionalTomcatConnectors(redirectConnector());
            return tomcat;
        }

        /*
         *@Description  http端口号配置
         *@params 
         *@Return org.apache.catalina.connector.Connector
         *@Author leesin
         *@Date 2020/10/24  11:07
         */
        private Connector redirectConnector() {
            Connector connector = new Connector(TomcatServletWebServerFactory.DEFAULT_PROTOCOL);
            connector.setScheme("http");
            connector.setPort(56086);
            connector.setSecure(false);
            connector.setRedirectPort(443);
            return connector;
        }


    }

感谢观看~ 1024节日快乐，很早就想写的一篇文章，1024写出来更加快乐👴