Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript で音声認識を試してみよう
Search
SAW
March 13, 2024
Programming
0
450
JavaScript で音声認識を試してみよう
Kyoto.js 21 の発表資料です。
SAW
March 13, 2024
Tweet
Share
More Decks by SAW
See All by SAW
React Hook Form と Zod によるフォームバリデーション
azuki
0
41
PHP で form-data を POST 以外のメソッドで受け取るには?
azuki
0
67
PHP で学ぶ OAuth 入門
azuki
2
1.1k
EditorConfig を使ってみよう
azuki
1
100
Symfony でサクッと作る REST API サーバー
azuki
1
230
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
350
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
380
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
170
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
400
Other Decks in Programming
See All in Programming
Agentic AI: Evolution oder Revolution
mobilelarson
PRO
0
140
AI主導でFastAPIのWebサービスを作るときに 人間が構造化すべき境界線
okajun35
0
670
AI時代でも変わらない技術コミュニティの力~10年続く“ゆるい”つながりが生み出す価値
n_takehata
2
700
エラーログのマスキングの仕組みづくりに役立ったASTの話
kumoichi
0
160
nuget-server - あなたが必要だったNuGetサーバー
kekyo
PRO
0
220
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
nnaka2992
1
260
SourceGeneratorのマーカー属性問題について
htkym
0
180
PJのドキュメントを全部Git管理にしたら、一番喜んだのはAIだった
nanaism
0
250
go directiveを最新にしすぎないで欲しい話──あるいは、Go 1.26からgo mod initで作られるgo directiveの値が変わる話 / Go 1.26 リリースパーティ
arthur1
2
520
AIとペアプロして処理時間を97%削減した話 #pyconshizu
kashewnuts
1
220
nilとは何か 〜interfaceの構造とnil!=nilから理解する〜
kuro_kurorrr
3
1.9k
AI Assistants for Your Angular Solutions
manfredsteyer
PRO
0
130
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.8k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
82
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.4k
A Modern Web Designer's Workflow
chriscoyier
698
190k
For a Future-Friendly Web
brad_frost
183
10k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
330
How to Ace a Technical Interview
jacobian
281
24k
Context Engineering - Making Every Token Count
addyosmani
9
740
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
380
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
470
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
190
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠