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

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

VSL 的诞生背景

什么是语音交互

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

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

视图交互的演变过程

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

视图交互的演化历程图

语音交互的应用场景

1. 第一个应用场景是手机：可能大家认为手机的主要交互方式还是触控，但是对于一些比较复杂的场景（比如说复杂表单的输入等操作），相对于触控交互的方式来说，语音交互的方式可以发挥快速输入、快速选择的优势，达到快速操作的效果。

2. 第二个应用场景是车载：当你在开车的时候，如果这时候想用手触控其他智能设备进行交互是非常危险的 。而语音交互恰巧可以帮你解放双手，增加我们驾驶的安全性。

3. 第三个场景就是智能家用设备：当我们在看电视的时候，会遇到很多浏览或选择电影、电视信息的场景，这时候，如果在距离电视中远距离的情况下，通过语音的方式来操作视图，将会有非常良好的智能用户体验。

使用语音交互的场景

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

传统的语音交互实践

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

1. 前后端要约定可以执行的所有动作，比如用户的选择意图动作，或者滑动意图动作等，并约定这些动作所对应的 ID。

2. 后端服务需要支持话术意图解析，即能解析用户话术，并与约定好的意图动作匹配成功。

3. 用户发起语音后，后端解析话术意图，将与之匹配的动作 ID 传给前端。

4. 前端根据约定好的 ID 去编写视图操作的处理逻辑

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

• 前后端需要进行大量的沟通，协议一些约定。

• 前端需要编写繁琐的关于语音端类处理、后端通信和视图操作处理等逻辑。

• 开发和维护成本过高。

• 可复用性差。

• 多场景下的交互效果无法保持一致：同一个场景，不同端会有相似的需求，但是却没有一个固定的表达，在多场景下均能匹配到这个语音。而且也无法实现相同交互逻辑。

• 没有形成规范：不同的人开发，代码的逻辑上无法统一，其实现的效果也无法保持一致。

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

VSL 的基本信息

定义

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

特点

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

• 低成本：为了解决页面视图赋予语音交互功能的开发成本过高。

• 低耦合：语音的处理从页面视图里抽象出来，开发者不需要关心语音操作的流程，只需要进行一些简单的配置，即可赋予整个视图语音交互的能力。

• 标准化：实现了一套语音交互视图的标准，统一了我们的开发形式，并且在交互效果上达成统一。

VSL 的使用和运转

如何使用 VSL

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

1. 对于 button 这个节点，需要声明 voice-tag 标签属性值是“确认”，voice-action 标签属性值是“click”。

2. 在 JS 层需要引入 VSL 模块，并且进行初始化

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

VSL 的运转流程

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

1. VSL 注册了端能力，具备进行语音监听能力，可以在页面视图中获取用户所说的话术。注册端能力的形式，在不同端下表达方式是不一样的。有些 APP 自身会提供一些语音的接口，在用户授权的情况下拿到用户的语音数据，像一些浏览器可以通过 getUserMedia 这样的方式去获取到用户的音频流，并且发送给音频识别服务，然后进行 query 解析。

2. 在拿到用户 query 之后，VSL 会对页面声明的那些属性进行解析，并且随着 query 一同去请求意图识别服务。

3. 这些具体信息给了意图识别服务之后，意图识别服务会去匹配用户意图的指令信息，并将结果值返回。

4. 根据指令中的节点和命令信息进行视图操作。

深入理解 VSL

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

1. 视图节点的属性，声明有什么作用？

2. VSL 针对视图解析了哪些信息？

3. 意图识别服务回传的指令信息是什么，具体表达含义是什么？

4. 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 的实例，其中包含了三个部分：

1. 对象，即 button 节点。

2. Action 的类别，本例为 click，以及它的意图为“确认”，并且同时包含了 VSL 生成的唯一识别的 ID。

3. 整个 Action 处理器，处理器的内容为触发该按纽的 click 操作。

Action 在 VSL 中的运转模式

分为以下几个步骤：

1. 通过 DSL 解析器来把整个页面解析成了一系列的 Action 的集合，这些 ACTION 集合里面，包含了我们所需要响应交互信息的各种节点元素。

2. 在解析完 Action 集合之后，用户发起语音，Action 中的信息会被传至意图理解服务。

3. 意图理解服务在匹配到合适的 Action 之后，会把结果返回给视图层，视图层的 Action Process 会去执行匹配意图的处理器。

VSL 的架构

VSL 的架构分为两块：

1. 核心模块，就是左边的 Core，它的定义是针对 VSL 中不同场景变换的那些模块的集合，比如说我们的视图解析的 DSL 解析器模块、Action 的管理器模块，以及一些默认的 Action 模块，还有跟意图识别服务通讯的等等这些模块。

2. 扩展模块，该模块里面主要包含了 VSL 在各个端下执行时所依赖的端能力，比如说依赖的一些跟端进行匹配的功能，在不同的端下执行端能力来实现音频的监听，这些在端上面的表达都是不一样的。不同的端下有其本身默认的一系列 Action，我们可以看到的是在这个场景下面，如果我们需要对 VSL 进行新的场景支持时，唯一需要做得就是在 Exception、端能力和默认 Action 中进行部分补充和添加即可。

VSL 的内部流程

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

1. 当页面被初始化时，DSL 解析器将会对整个页面进行视图解析。

2. 在用户发起语音 query 时，语音监听模块会拿到用户的语音，此时会和页面信息一同发送给识别服务。

3. 识别服务在匹配到符合用户意图的 Action 之后，会回传给视图层的 Action Manager 模块，Action manager 模块会带着匹配到的动作 ID 去执行对应的 Action，Action 里面的处理器也会同步的操作视图。

VSL 的应用场景

• 百度的搜索结果，比如快递查询，机票查询和房贷计算器等，将 VSL 作为它们语音交互功能的支撑。

• 百度的语音产品，比如说百度作业模式等，也将 VSL 作为该产品语音交互的基础。

• 搭载了 DuerOS 的智能设备，VSL 提供了语音交互视图的功能，就以小度智能音箱中的语音视图交互场景为例，它的覆盖率已经达到了 90%。

VSL 的未来

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

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

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