menu 楠猫
search
close
表情包在线生成–支持 TNT 模式 (语音识别)
18 浏览 | 0 评论

5 月 15 日 老罗发布了改变世界的 TNT, 虽然不是锤黑, 但看到价格和各种吐槽还是忍不住笑了
请输入图片描述
最近记仇的表情包挺火的, 所以也想做一个玩玩, 参考了 http://mdzz.space/ , 折腾了半天才把某些玄学 bug 解决了, 于是某位大佬发言了
请输入图片描述
嗯, 想法不错, 说弄就弄, 一开始准备用百度语音识别的 api 的, 发现流程有点复杂, 而且官方除了后端只有个 REST API 文档, 自己造轮子太麻烦了, 无意中发现了 Chrome 有语音识别的 API, 有两种方法可以实现本地识别

  1. 在 input 标签上加一个 x-webkit-speech 属性

方法虽然可行, 但我这死活都出不来, 而且是调用 Google 语音的接口, 如果没有科学上网还用不了, 暂时不会使用用, 使用方法:

<input x-webkit-speech />
  1. 使用 Web Speech API

部分浏览器自带了 Web Speech API , 可以本地进行语音识别, 不需要网络, 只不过兼容性不是很好, 主要函数:

recognition = new SpeechRecognition(); //创建一个 SpeechRecognition 对象
recognition.onresult = function (e) {}; //识别语音的函数
recognition.start(); //开始录音

其他 API 可以参考 Web Speech API - Web APIs | MDN

对比了两个方法后毫无疑问选择第二个, 研究了半天终于成型了, 目前实现了

  • 本地语音识别, 不依赖任何网络服务
  • 可自行上传图片, 也可使用模板的图片
  • 可自行替换文字, 可设置样式 (居中, 加粗)

已知 bug:

  • 语音识别的兼容性很差, 请使用现代浏览器 (推荐 Chrome)
  • 语音识别经常会不生效, 请刷新后重试

网站: https://ice-hazymoon.github.io/bqb_tnt/dist/

源代码: Ice-Hazymoon/bqb_tnt

请输入图片描述

本文作者:admin
本文链接:https://southcat.xyz/index.php/archives/72/
最后修改时间:2019-10-04 09:49:32
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!

评论

textsms
支持Markdown语法
email
link

mode_comment 全部评论 暂无评论(;´д`)ゞ