百度搜索前端团队在语音交互的探索和开发中，产出了一套语音交互编程语言：VSL，用于帮助开发者们快速低成本的接入语音交互的能力，让语音控制视图内元素的交互成为可能。本文整理自百度高级前端工程师陈奇在 QCon全球软件开发大会（北京站）2019 上的演讲，他在本次分享中为大家详细了介绍 VSL 的运转方式和实现功能。点此下载完整版PPT。

VSL的诞生背景

什么是语音交互

说到语音交互，大家会想到像siri这样的语音智能助手。的确，语音助手是我们生活中比较常见的一种语音交互方式，通过跟语音智能助手进行对话，可以快速的获取到我们想要的信息，省去打开搜索引擎进行信息搜索的人力成本。那么这样的交互方式，可以归纳为一种对话式的语音交互。

但对于前端工程师来说，有没有办法把语音也纳入我们的开发中，作为我们操作形式的一部分呢？答案是肯定的。我们把这样交互方式称之为视图操作式的语音交互，首先我们来看下语音交互的演变过程。

视图交互的演变过程

在早期的PC时代，大家基本上通过鼠标之类的外设进行点击或滑动来完成视图交互。之后，随着可触控式智能设备迅速发展，所触即所得的触控交互方式被大家迅速接受。而到了近几年，语音的爆红，语音进行视图交互的方式开始萌芽，并逐步发展。

视图交互的演化历程图

语音交互的应用场景

第一个应用场景是手机：可能大家认为手机的主要交互方式还是触控，但是对于一些比较复杂的场景（比如说复杂表单的输入等操作），相对于触控交互的方式来说，语音交互的方式可以发挥快速输入、快速选择的优势，达到快速操作的效果。
第二个应用场景是车载：当你在开车的时候，如果这时候想用手触控其他智能设备进行交互是非常危险的。而语音交互恰巧可以帮你解放双手，增加我们驾驶的安全性。
第三个场景就是智能家用设备：当我们在看电视的时候，会遇到很多浏览或选择电影、电视信息的场景，这时候，如果在距离电视中远距离的情况下，通过语音的方式来操作视图，将会有非常良好的智能用户体验。

使用语音交互的场景

除了我上面说的这三个场景之外，语音交互还有很多其他的应用场景。比如，在一定的场景下，身体上有残障的用户无法手动使用外设进行操作，语音交互的方式可以很好的解决这个问题。类似的场景很多，这里就不一一叙述了。

传统的语音交互实践

起初，我们百度搜索团队在刚接触到语音交互需求的时候，大家常规的思路为：

前后端要约定可以执行的所有动作，比如用户的选择意图动作，或者滑动意图动作等，并约定这些动作所对应的ID。
后端服务需要支持话术意图解析，即能解析用户话术，并与约定好的意图动作匹配成功。
用户发起语音后，后端解析话术意图，将与之匹配的动作ID传给前端。
前端根据约定好的ID去编写视图操作的处理逻辑

上面的思路虽然清晰，但是这种开发流程存在着以下缺点：

前后端需要进行大量的沟通，协议一些约定。
前端需要编写繁琐的关于语音端类处理、后端通信和视图操作处理等逻辑。
开发和维护成本过高。
可复用性差。
多场景下的交互效果无法保持一致：同一个场景，不同端会有相似的需求，但是却没有一个固定的表达，在多场景下均能匹配到这个语音。而且也无法实现相同交互逻辑。
没有形成规范：不同的人开发，代码的逻辑上无法统一，其实现的效果也无法保持一致。

为了解决这些问题，我们创造了VSL（Voice Specific Language）。

VSL的基本信息

定义

VSL是Voice Specific Language的缩写，其定义是面向智能设备的语音交互编程语言。简单来说，它是为了解决语音交互视图问题而诞生的特定语言，通过提供一套接入规范和技术框架，并封装了语音交互的核心功能，使各场景能够快速、低成本的接入语音。

特点

VSL特点有三个，分别是低成本，低耦合和标准化：

低成本：为了解决页面视图赋予语音交互功能的开发成本过高。
低耦合：语音的处理从页面视图里抽象出来，开发者不需要关心语音操作的流程，只需要进行一些简单的配置，即可赋予整个视图语音交互的能力。
标准化：实现了一套语音交互视图的标准，统一了我们的开发形式，并且在交互效果上达成统一。

VSL的使用和运转

如何使用VSL

假设我们把VSL应用的场景精简化，简化到里面只有一个点击的确认按纽，我们现在想要达到的效果是：当我们说确认时，能够触发点击按纽的操作。在使用VSL的时，主要分为两个部分：

对于button这个节点，需要声明voice-tag标签属性值是“确认”，voice-action标签属性值是“click”。
在JS层需要引入VSL模块，并且进行初始化

你可以看到，这短短不到十行的代码，就代表整个页面已经拥有了语音交互的能力，不管对这个页面说“确认”，或“确定”，或“点击确认按纽”的时候，都会响应这个按纽的点击操作。

VSL的运转流程

VSL在是如何去处理整个视图以及语音交互功能呢？接下来，就为大家介绍一下：

VSL注册了端能力，具备进行语音监听能力，可以在页面视图中获取用户所说的话术。注册端能力的形式，在不同端下表达方式是不一样的。有些APP自身会提供一些语音的接口，在用户授权的情况下拿到用户的语音数据，像一些浏览器可以通过getUserMedia这样的方式去获取到用户的音频流，并且发送给音频识别服务，然后进行query解析。
在拿到用户query之后，VSL会对页面声明的那些属性进行解析，并且随着query一同去请求意图识别服务。
这些具体信息给了意图识别服务之后，意图识别服务会去匹配用户意图的指令信息，并将结果值返回。
根据指令中的节点和命令信息进行视图操作。

深入理解VSL

看完上面的流程图之后，可能大家还是不太理解，我这边总结了四个问题，这四个问题也是整个流程比较关键的四个点：

视图节点的属性，声明有什么作用？
VSL针对视图解析了哪些信息？
意图识别服务回传的指令信息是什么，具体表达含义是什么？
VSL是如何执行这些指令信息的?

先不急于回答这些问题，下面我给大家介绍VSL的基本概念Action，在此过程中顺便解答下上面的问题。

Action的基本概念

Action的中文表达就是行为，它在VSL定义很简单，也就是一种用户行为的抽象，不管是点击、滑动、选择都是一种Action，是VSL进行视图解析、意图分析以及行为操作的基本单元。它由三个部分组成，分别是操作对象、属性和处理器：

操作对象：即这个行为的目标，进行操作所针对节点。
属性：操作对象的基本信息，比如说它的意图为确认或取消，或者是对于一些基本控件的信息等。举个例子，比如说我们的Input控件，它的属性类型可能会是密码、邮箱等。
处理器：简单来讲，就是在匹配到这个意图之后，VSL该如何执行这个Action，并反映到视图的操作上面。下图就是定义了Action的执行方式是“点击”。

VSL也提供了一系列的属性和JSAPI来描述这一系列的Action的行为：

VSL中内内置了12种Action，分别包含了点击、输入、滑动、选择、切换标签，并且也提供了JS API，以便用户根据自己的场景需求来自定义不同的 Action。

Action实例

我们再把视角回到“点击确认按纽”的例子中，在声明voice-action和voice-tag属性之后，整个视图会创建一个Action的实例，其中包含了三个部分：

对象，即button节点。
Action的类别，本例为click，以及它的意图为“确认”，并且同时包含了VSL生成的唯一识别的ID。
整个Action处理器，处理器的内容为触发该按纽的 click 操作。

Action在VSL中的运转模式

分为以下几个步骤：

通过DSL解析器来把整个页面解析成了一系列的Action的集合，这些ACTION集合里面，包含了我们所需要响应交互信息的各种节点元素。
在解析完Action集合之后，用户发起语音，Action中的信息会被传至意图理解服务。
意图理解服务在匹配到合适的Action之后，会把结果返回给视图层，视图层的Action Process会去执行匹配意图的处理器。

VSL的架构

VSL的架构分为两块：

核心模块，就是左边的Core，它的定义是针对VSL中不同场景变换的那些模块的集合，比如说我们的视图解析的DSL解析器模块、Action的管理器模块，以及一些默认的Action模块，还有跟意图识别服务通讯的等等这些模块。
扩展模块，该模块里面主要包含了VSL在各个端下执行时所依赖的端能力，比如说依赖的一些跟端进行匹配的功能，在不同的端下执行端能力来实现音频的监听，这些在端上面的表达都是不一样的。不同的端下有其本身默认的一系列Action，我们可以看到的是在这个场景下面，如果我们需要对VSL进行新的场景支持时，唯一需要做得就是在Exception、端能力和默认Action中进行部分补充和添加即可。

VSL的内部流程

从用户发起语音交互的query，到整个页面执行视图操作的过程中所发生的事情：

当页面被初始化时，DSL解析器将会对整个页面进行视图解析。
在用户发起语音query时，语音监听模块会拿到用户的语音，此时会和页面信息一同发送给识别服务。
识别服务在匹配到符合用户意图的Action之后，会回传给视图层的Action Manager模块，Action manager模块会带着匹配到的动作ID去执行对应的Action，Action里面的处理器也会同步的操作视图。

VSL的应用场景

百度的搜索结果，比如快递查询，机票查询和房贷计算器等，将VSL作为它们语音交互功能的支撑。
百度的语音产品，比如说百度作业模式等，也将VSL作为该产品语音交互的基础。
搭载了DuerOS的智能设备，VSL提供了语音交互视图的功能，就以小度智能音箱中的语音视图交互场景为例，它的覆盖率已经达到了90%。

VSL的未来

我们正在努力丰富并强化VSL的功能，不仅仅是增强意图识别能力，还要丰富用户指令集，拓宽更多的应用场景。另外，我们还希望VSL不只在百度内部推广，希望未来能将VSL普及并开源，在业内为语音交互视图提供通用解决方案。

语音交互视图是下一个比较热门的概念，随着智能设备的发展和语音交互能力的提升，我相信接下来会有越来越多的场景支持语音交互。希望这次的分享能够给大家带来一定的帮助和思考。

QCon 全球软件开发大会（北京站）2019 已经圆满结束，QCon上海2019 即将起航，点击此处了解详情。

创作场景

百度自研面向智能设备的语音交互编程语言 VSL：用于实现语音交互视图