Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript で音声認識を試してみよう
Search
SAW
March 13, 2024
Programming
0
410
JavaScript で音声認識を試してみよう
Kyoto.js 21 の発表資料です。
SAW
March 13, 2024
Tweet
Share
More Decks by SAW
See All by SAW
React Hook Form と Zod によるフォームバリデーション
azuki
0
16
PHP で form-data を POST 以外のメソッドで受け取るには?
azuki
0
39
PHP で学ぶ OAuth 入門
azuki
2
770
EditorConfig を使ってみよう
azuki
1
89
Symfony でサクッと作る REST API サーバー
azuki
1
190
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
260
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
330
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
150
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
370
Other Decks in Programming
See All in Programming
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
240
これだけで丸わかり!LangChain v1.0 アップデートまとめ
os1ma
6
1.1k
Module Harmony
petamoriken
2
590
GeistFabrik and AI-augmented software development
adewale
PRO
0
230
Evolving NEWT’s TypeScript Backend for the AI-Driven Era
xpromx
0
230
乱雑なコードの整理から学ぶ設計の初歩
masuda220
PRO
32
15k
レイトレZ世代に捧ぐ、今からレイトレを始めるための小径
ichi_raven
0
490
エディターってAIで操作できるんだぜ
kis9a
0
540
『実践MLOps』から学ぶ DevOps for ML
nsakki55
2
500
AWS CDKの推しポイントN選
akihisaikeda
1
230
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
tomohisa
5
16k
なあ兄弟、 余白の意味を考えてから UI実装してくれ!
ktcryomm
10
10k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Side Projects
sachag
455
43k
The Cult of Friendly URLs
andyhume
79
6.7k
Navigating Team Friction
lara
191
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Writing Fast Ruby
sferik
630
62k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Context Engineering - Making Every Token Count
addyosmani
9
450
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Transcript
+BWB4DSJQUͰԻೝࣝΛࢼͯ͠ΈΑ͏ ,ZPUPKT 4"8
$(whoami) ࢯ໊Ճ౻फҰ ࡀ ϋϯυϧωʔϜ4"8 ؔͷ*5ΤϯδχΞίϛϡχςΟͷ͔͠୲ ࣗশ େࡕࡏॅɾѪग़ 9
چ5XJUUFS !B[VLJ@FBUFS ಘҙ8FCΞϓϦέʔγϣϯ։ൃ 7VF -BSBWFM 2
+BWB4DSJQUͰԻೝࣝ 4QFFDI3FDPHOJUJPO"1*Λར༻ ॳճར༻࣌ϒϥβ͕ϚΠΫͷڐՄΛ֬ೝ ݪଇ)5514ͰͷΈར༻Մೳ ྫ֎ͱͯ͠localhostͷ߹)551Ͱར༻Մೳ 3
ԻೝࣝͷجຊతͳྲྀΕ SpeechRecognitionͷΠϯελϯεΛ࡞ start()ͰԻೝࣝΛ։࢝ onresult()ͷϋϯυϥͰೖྗ݁ՌΛऔಘ 4
SpeechRecognitionͷΠϯελϯεΛ࡞ windowΦϒδΣΫτ͔ΒSpeechRecognitionϓϩύςΟΛऔಘ 4BGBSJ(PPHMF$ISPNFͰwebkitSpeechRecognitionͰऔಘ 5 // SpeechRecognition プロパティを取得 const speechRecognition =
// SpeechRecognition か webkitSpeechRecogntion を取得 window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new speechRecognition();
Իೝࣝͷ։࢝ͱೝࣝ݁Ռͷऔಘ SpeechRecognitionͷstart()ͰԻೝࣝ։࢝ ॳճ࣮ߦ࣌ϚΠΫͷ༻ͷڐՄΛٻΊΒΕΔ SpeechRecognitionͷonresult()Ͱೝࣝ݁ՌΛऔಘͯ͠ॲཧΛ࣮ߦ onresult()ͷҾʹॲཧΛ࣮ߦ͢ΔϋϯυϥΛࢦఆ ϋϯυϥͷୈҾ͔ΒԻೝࣝͷ݁ՌΛऔಘ SpeechRecognitionEventͷresults[0][0].transcriptʹೝࣝ݁ՌΛ֨ೲ 6
Իೝࣝͷίʔυྫ 7 // 音声認識の開始 recognition.start(); // 音声認識の結果を取得 recognition.onresult((event) => {
const { transcript } = event.results[0][0]; console.log(transcript); });
ೝࣝͤ͞Δݴޠͷࢦఆ SpeechRecognitionͷlangϓϩύςΟͰݴޠΛࢦఆՄೳ ࢦఆ͠ͳ͍߹)5.-ͷlangଐੑ͔ϒϥβͷݴޠΛઃఆ 8 recognition.lang = 'ja-JP';
࣮ࡍͷར༻ྫ ӳ୯ޠֶशΞϓϦ ։ൃத ը૾Λݟͯॠ࣌ʹӳ୯ޠΛൃԻ ө૾ͱ୯ޠΛඥֶ͚ͯश Իೖྗʹ4QFFDI3FDPHOJUJPO"1*Λར༻ ӳޠҎ֎ͷରԠՄೳ 9
4QFFDI3FDPHOJUJPO"1*ͷܽ Ұ෦ϒϥβͰར༻Ͱ͖ͳ͍ 'JSFGPY &EHFͳͲ 5ZQF4DSJQUͰܕఆ͕ٛαϙʔτ͞Ε͍ͯͳ͍ ಠࣗͰఆٛ͢Δ͔window as anyͰରॲ 1 0
·ͱΊ +BWB4DSJQU͔ΒԻೝࣝΛར༻͢Δํ๏Λհ 4QFFDI3FDPHOJUJPO"1*Λར༻ 4QFFDI3FDPHOJUJPO"1*ͷ͍ํͷྲྀΕΛհ start()ͰԻೝࣝΛ։࢝ onresult()Ͱೝࣝͨ݁͠ՌΛऔಘͯ͠ॲཧΛ࣮ߦ 4QFFDI3FDPHOJUJPO"1*ͷܽΛհ Ұ෦ϒϥβͰར༻ෆՄ 5ZQF4DSJQUͰܕఆ͕ٛαϙʔτ͞Ε͍ͯͳ͍ 1
1
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠