表情包在线生成–支持 TNT 模式(语音识别)

5月15日 老罗发布了改变世界的 TNT, 虽然不是锤黑, 但看到价格和各种吐槽还是忍不住笑了

最近记仇的表情包挺火的, 所以也想做一个玩玩, 参考了 http://mdzz.space/ , 折腾了半天才把某些玄学 bug 解决了, 于是某位大佬发言了@(暗中流汗)

嗯, 想法不错, 说弄就弄, 一开始准备用百度语音识别的 api 的, 发现流程有点复杂, 而且官方除了后端只有个 REST API 文档, 自己造轮子太麻烦了, 无意中发现了 Chrome 有语音识别的API, 有两种方法可以实现本地识别

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

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

<input x-webkit-speech />

2. 使用 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

评论

  1. AdamTyn
    Windows Chrome 74.0.3729.131
    2年前
    2019-5-20 15:57:40

    老哥 https://miku.tools/tools/image_editor 这个工具是开源的吗
    能不能给下源码 学习一下(☆ω☆)

    • Ice-Hazymoon 博主
      Windows Chrome 72.0.3626.121
      2年前
      2019-5-20 18:39:06
      • A
        Android Chrome 74.0.3729.157
        2年前
        2019-5-20 18:40:20

        我刚刚找到了
        thank u
        节日快乐|´・ω・)ノ

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇