声音编码_如何用声音编码

声音编码

Ever get tired of constantly looking up correct syntax for various components like cards, checkboxes, or modals? Ever wonder if you could speed up your coding by having instant access to predefined templates? Or if you could control various parts of your application or computer with voice commands? Well, wonder no more! You can do all that and more today.

曾经厌倦了不断为卡，复选框或模态等各种组件查找正确的语法吗？ 有没有想过是否可以通过立即访问预定义的模板来加快编码速度？ 还是可以使用语音命令控制应用程序或计算机的各个部分？ 好吧，不要再想了！ 您今天可以做更多的事情。

I built a fully JavaScript based speech-to-text application using Web Speech API, React, Node, and Express to prove this was possible. Just by saying a few words, I can instantly insert code segments into my editor. I can even modify parts of that code with dynamic commands and speak in different languages.

我使用Web Speech API，React，Node和Express构建了一个完全基于JavaScript的语音转文本应用程序，以证明这是可能的。 只需说几句话，我就可以立即将代码段插入编辑器。 我什至可以使用动态命令来修改部分代码，并以不同的语言说。

The app I built has mappings for React and HTML, but you could create mappings for any language, text, or command that you want; the possibilities are endless. You can find all the source code here. And here’s a little preview:

我构建的应用程序具有针对React和HTML的映射，但是您可以为所需的任何语言，文本或命令创建映射。 可能性是无止境。 您可以在此处找到所有源代码。 以下是一些预览：

I didn’t type a single a letter in that preview but had a new component and various placeholder templates for a form in less than 20 seconds. I started the app and simply said the words component, email, check, toggle, quote, and alert success into my microphone. The app picks up those commands, finds appropriate mappings, updates any dynamic portions of the command text (like the ‘success’ type for alert), and inserts the code into my editor; pretty neat.

我没有在该预览中输入单个字母，而是在不到20秒的时间内为表单创建了一个新组件和各种占位符模板。 我启动了该应用程序，并简单地说出了component ， email ， check ， toggle ， quote和alert success字样。 该应用程序会拾取这些命令，找到适当的映射，更新命令文本的任何动态部分(例如警报的“成功”类型)，然后将代码插入到我的编辑器中； 很简约。

如何建造 (How it is built)

The first step was finding a speech-to-text program to use (you can use your own if you’re feeling ambitious). I initially had the app working with Google’s Cloud Speech-to-Text, but realized you reach their free limits way too quickly, meaning you could end up spending quite a lot of money. So I went with Web Speech API, which is built into Chrome and completely free to use. To utilize it, I built a simple React application using the React Speech Recognition library.

第一步是找到要使用的语音转文本程序(如果您有雄心壮志，可以使用自己的程序)。 最初，我使该应用程序与Google的Cloud Speech-to-Text配合使用，但意识到您太快达到其免费限制的程度，这意味着您最终可能会花费很多钱。 因此，我使用了内置于Chrome且完全免费使用的Web Speech API 。 为了利用它，我使用React Speech Recognition库构建了一个简单的React应用程序。

Next I built mappings to link voice outputs to pieces of code. For example, saying the word “component” maps to a template for React functional components. And anything picked up after the word “component” will be used as the component’s name.

接下来，我构建了将语音输出链接到代码段的映射。 例如，说“组件”一词映射到React功能组件的模板。 在“组件”一词之后拾取的所有内容都将用作组件的名称。

Then we can send the resulting template to a back-end Express server to use. I used clipboardy to copy the text to my computer’s clipboard and robotjs to programmatically paste the text wherever my cursor is. This copy-paste has to be done on a back-end server because a browser isn’t allowed to execute actions on your operating system (that would be scary).

然后，我们可以将结果模板发送到后端Express服务器以使用。 我使用剪贴板将文本复制到计算机的剪贴板中，然后使用robotsjs以编程方式将文本粘贴到光标所在的位置。 此复制粘贴必须在后端服务器上完成，因为不允许浏览器在您的操作系统上执行操作(这很可怕)。

And that’s it. Once I start up the front-end and back-end portions, I can click start on the UI and leave it running in the background. While I’m coding away on projects, I just have to say a few words into my mic and a predefined template will magically appear in my editor (sugoi!).

就是这样。 一旦启动了前端和后端部分，就可以单击UI上的“开始”并使其在后台运行。 在为项目编码时，我只需要在麦克风中说几句话，就会在编辑器中神奇地显示预定义的模板(sugoi！)。

I also tried the Speech API with different languages. English was definitely the smoothest language I tested, followed by Spanish. Some languages like Chinese and Japanese have issues with Web Speech API detecting end of speech. So your results may vary based on what language you choose.

我还尝试了不同语言的语音API。 英语绝对是我测试过的最流畅的语言，其次是西班牙语。 某些语言(例如中文和日语)在Web Speech API检测语音结束时存在问题。 因此，您的结果可能会因您选择的语言而异。

它还能做什么？ (What else can it do?)

Well, pretty much anything you can imagine. The framework in this app can be extended for different coding languages, voice interactions on your UI, npm or git commands, macro commands on your computer, scripts to automate tedious tasks, IoT integration, chat bots, and things I can’t even imagine right now. I included instructions on how to add more commands and spoken languages to the repo, so if you want to help contribute or branch off and experiment with custom commands, please feel free!

好吧，几乎您可以想象的任何事情。 该应用程序中的框架可以扩展为不同的编码语言，UI上的语音交互，npm或git命令，计算机上的宏命令，用于自动完成繁琐任务的脚本，IoT集成，聊天机器人以及我什至无法想象的事情马上。 我提供了有关如何在存储库中添加更多命令和口语的说明，因此，如果您想帮助贡献或分支并尝试使用自定义命令，请放心！

翻译自: https://medium.com/javascript-in-plain-english/how-to-code-with-your-voice-f49f995a8bc6

声音编码