说在前面
最近实现了一个b站语音助手插件，可以通过语音来控制播放页面上指定的视频，在语音识别的过程中遇到了一个问题：语音识别出来的文本是预设语音指令同音词，导致语音指令匹配不上。这个时候有两种解决方案：
- 1.换个指令
- 2.直接按拼音来匹配指令
对插件感兴趣的同学可以看下这篇文章：因为懒得点鼠标，我给B站做了个语音助手
引入拼音转换库
这里我选择了 github 上 shar 最多的一个库：pinyin
该库具备：
- 根据词组智能匹配最正确的拼音。
- 支持多音字。
- 简单的繁体支持。
- 支持多种不同拼音风格。
vue项目中引入
在 Vue 项目里，我们可以直接通过 npm 工具来引入拼音转换库：
npm install pinyin --save
引入完成后即可直接使用：
import pinyin from "pinyin";
console.log(pinyin("中心")); // [ [ 'zhōng' ], [ 'xīn' ] ]
插件中引入
在插件中我们可以直接将js文件复制到项目中来引入使用。
首先，通过npm install pinyin获取拼音转换库的相关文件。在安装完成后的项目目录中，找到 pinyin 包的 dist 文件夹，其中的 index.js 文件便是我们需要的核心代码。将这个 index.js 文件复制一份，粘贴到自己的插件项目中，即可完成库的引入。
指令匹配
比如现在我们有个指令名字为：下拉，但是语音识别出来的文本是 下啦，这样的话就无法将语言和指令匹配上。
const cmd= "下拉";
const text = "下啦";
console.log(text.includes(cmd)) //false
这时候我们就可以将他们都转为拼音再进行匹配。
const { pinyin } = window.pinyinPro;
const cmd= "下拉";
const text = "下啦";
console.log(text.includes(cmd)) //false
const cmdPinyin = pinyin(cmd);
console.log(cmdPinyin); //xià lā
const textPinyin = pinyin(text);
console.log(textPinyin); //xià lā
console.log(textPinyin.includes(cmdPinyin)) //true
公众号
关注公众号『 前端也能这么有趣 』，获取更多有趣内容。
发送 加群 还可以加入群聊，一起来学习（摸鱼）吧~
说在后面
🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『
前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。
