Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Voice Recognition in JavaScript

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for SAW SAW
March 13, 2024
Programming
0
110

Voice Recognition in JavaScript

A presentation slide of Kyoto.js 21.

Avatar for SAW

SAW

March 13, 2024
Tweet

More Decks by SAW

See All by SAW
React Hook Form と Zod によるフォームバリデーション
Avatar for SAW azuki
0
33
PHP で form-data を POST 以外のメソッドで受け取るには?
Avatar for SAW azuki
0
60
PHP で学ぶ OAuth 入門
Avatar for SAW azuki
2
1k
EditorConfig を使ってみよう
Avatar for SAW azuki
1
96
Symfony でサクッと作る REST API サーバー
Avatar for SAW azuki
1
220
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
Avatar for SAW azuki
1
320
Laravel や Symfony で手っ取り早く
OpenAPI のドキュメントを作成する
Avatar for SAW azuki
2
380
Provide/Inject で TypeScript の恩恵を受ける方法
Avatar for SAW azuki
3
170
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
Avatar for SAW azuki
1
400

Other Decks in Programming

See All in Programming
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
420
浮動小数の比較について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
220
CSC307 Lecture 10
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
680
iOSアプリでフロントエンドと仲良くする
Avatar for Ryu-nakayama ryunakayama
0
110
2025年の活動の振り返り
Avatar for Hideyuki Nagata hideg
0
100
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
810
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
160
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
260
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
640
Metaprogramming isn't real, it can't hurt you
Avatar for Masafumi Okura okuramasafumi
0
110
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
Rubyと楽しいをつくる / Creating joy with Ruby
Avatar for chobishiba chobishiba
0
160

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
72
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
140
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.2k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
8k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
440
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
210
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
60
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.7k

Transcript

  1. 7PJDF3FDPHOJUJPOJO+BWB4DSJQU ,ZPUPKT  4"8

  2. $(whoami) /BNF4PJDIJSP,BUP "HF  /JDLOBNF4"8 NBLFT*5FOHJOFFSDPNNVOJUZIFBUJO,BOTBJBSFB -JWFJO0TBLB(SFXVQJO"JDIJ 9 BLB5XJUUFS !B[VLJ@FBUFS

    .ZTUSPOHBSFB8FCBQQMJDBUJPOEFWFMPQNFOU 7VF -BSBWFM 2

  3. 7PJDF3FDPHOJUJPOJO+BWB4DSJQU 6TF4QFFDI3FDPHOJUJPO"1* CSPXTFSTBTLVTUPBMMPXUPVTFNJDSPQIPOFBU fi STUVTF 0OMZBWBJMBCMFPO)5514 FYDFQUJPOUIF"1*JTBWBJMBCMFPO)551POlocalhost 3

  4. 5IF#BTJD'MPXPG7PJDF3FDPHOJUJPO6TBHF  (FOFSBUFBOJOTUBODFPGSpeechRecognition  4UBSUWPJDFSFDPHOJUJPOCZstart()NFUIPE  (FUWPJDFJOQVUSFTVMUCZonresult()NFUIPE 4

  5. (FOFSBUJOHBSpeechRecognitionJOTUBODF (FUSpeechRecognitionQSPQFSUZGSPNwindowPCKFDU (FUUIFQSPQFSUZwebkitSpeechRecognitionPO4BGBSJBOE(PPHMF $ISPNF 5 // Get SpeechRecognition property. const

    speechRecognition = // Get SpeechRecognition or webkitSpeechRecogntion window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new speechRecognition();

  6. 4UBSU7PJDF3FDPHOJUJPO"OE(FUUIF3FTVMU 4UBSUWPJDFSFDPHOJUJPOCZstart()JOSpeechRecognition 5IFQFSNJTTJPOSFRVJSFEUPVTFNJDSPQIPOFBU fi STUFYFDVUJPO (FUSFTVMUCZonresult()JOSpeechRecognition 4FUBIBOEMFSUPonresult()BSHVNFOU (FUSFTVMUGSPNUIFTUBSHVNFOUJOUIFIBOEMFS 5IFSFTVMUJODMVEFEJOresults[0][0].transcriptJO SpeechRecognitionEvent

    6

  7. &YBNQMFPGstart()onresult()*NQMFNFOUBUJPO 7 // begin voice recognition recognition.start(); // get voice

    recognition result recognition.onresult((event) => { const { transcript } = event.results[0][0]; console.log(transcript); });

  8. 4QFDJGZUIF-BOHVBHFUP3FDPHOJ[F 4QFDJ fi FEUIFMBOHVBHFPOlangQSPQFSUZJOSpeechRecognition 5IFWBMVFPGlangQSPQFSUZJO)5.-PSCSPXTFSMBOHVBHFGPSEFGBVMU 8 recognition.lang = 'ja-JP';

  9. "DUVBM&YBNQMF 8FC"QQUPMFBSO&OHMJTIXPSET XPSLJOQSPHSFTT  -PPLBUJNBHFBOETBZUIFXPSEPGUIFJNBHF -FBSOWPDBCVMBSZXJUIJNBHF 6TF4QFFDI3FDPHOJUJPO"1*JOBQQMJDBUJPO BWBJMBCMFUPFYUFOEGPSPUIFSMBOHVBHFT 9

  10. -JNJUBUJPOPG4QFFDI3FDPHOJUJPO"1* 4PNFCSPXTFSTOPUTVQQPSU4QFFDI3FDPHOJUJPO"1* 'JSFGPY &EHF FUD 5ZQFEF fi OJUJPOOPUTVQQPSUFEJO5ZQF4DSJQU /FFEUPEF fi

    OFCZPVSTFMWFT PSDBTUwindow as any 1 0

  11. $PODMVTJPO *OUSPEVDFEWPJDFSFDPHOJUJPOJO+BWB4DSJQU 6TF4QFFDI3FDPHOJUJPO"1* 5IFCBTJD fl PXPG4QFFDI3FDPHOJUJPO"1*VTBHF 4UBSUSFDPHOJUJPOCZstart()NFUIPE (FUSFTVMUCZonresult() -JNJUBUJPOPG4QFFDI3FDPHOJUJPO"1* 4PNFCSPXTFSTOPUTVQQPSUFE

    5ZQFEF fi OJUJPOOPUTVQQPSUFEJO5ZQF4DSJQU 1 1

  12. 5IBOLZPVGPSMJTUFOJOH