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

Voice Recognition in JavaScript

Avatar for SAW SAW
March 13, 2024
Programming
0
91

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
PHP で学ぶ OAuth 入門
Avatar for SAW azuki
2
610
EditorConfig を使ってみよう
Avatar for SAW azuki
1
83
Symfony でサクッと作る REST API サーバー
Avatar for SAW azuki
1
180
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
Avatar for SAW azuki
1
220
Laravel や Symfony で手っ取り早く
OpenAPI のドキュメントを作成する
Avatar for SAW azuki
2
320
Provide/Inject で TypeScript の恩恵を受ける方法
Avatar for SAW azuki
3
150
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
Avatar for SAW azuki
1
370
OSS contributor への第一歩を踏み出すまでの物語
Avatar for SAW azuki
2
330
Eloquent で relation を扱う基礎
Avatar for SAW azuki
0
170

Other Decks in Programming

See All in Programming
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
Avatar for Naofumi Kagami naofumi
4
3.8k
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
Avatar for Takeru Hayasaka takehaya
8
1.6k
dynamic!
Avatar for MOROHASHI Kyosuke moro
10
7.2k
Serena MCPのすすめ
Avatar for wadakatu wadakatu
4
960
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
Avatar for shibayu36 shibayu36
3
4.8k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
Avatar for aokirishima aokswork3
0
220
技術的負債の正体を知って向き合う / Facing Technical Debt
Avatar for irof irof
0
140
ソフトウェア設計の実践的な考え方
Avatar for 増田 亨 masuda220
PRO
4
550
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
Avatar for Holly Cummins hollycummins
0
210
Back to the Future: Let me tell you about the ACP protocol
Avatar for Benedikt Terhechte terhechte
0
140

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
339
57k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
114
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
900
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
32
2.3k

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