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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
SAW
March 13, 2024
Programming
0
430
JavaScript で音声認識を試してみよう
Kyoto.js 21 の発表資料です。
SAW
March 13, 2024
Tweet
Share
More Decks by SAW
See All by SAW
React Hook Form と Zod によるフォームバリデーション
azuki
0
31
PHP で form-data を POST 以外のメソッドで受け取るには?
azuki
0
51
PHP で学ぶ OAuth 入門
azuki
2
970
EditorConfig を使ってみよう
azuki
1
94
Symfony でサクッと作る REST API サーバー
azuki
1
220
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
300
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
370
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
160
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
390
Other Decks in Programming
See All in Programming
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
5.8k
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
1.9k
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
wisemuji
0
180
CSC307 Lecture 05
javiergs
PRO
0
490
CSC307 Lecture 07
javiergs
PRO
0
520
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう!
neruneruo
4
2.6k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
390
Fragmented Architectures
denyspoltorak
0
140
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
920
CSC307 Lecture 03
javiergs
PRO
1
480
Grafana:建立系統全知視角的捷徑
blueswen
0
310
CSC307 Lecture 02
javiergs
PRO
1
770
Featured
See All Featured
Building the Perfect Custom Keyboard
takai
2
670
Balancing Empowerment & Direction
lara
5
850
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
710
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
160
How to make the Groovebox
asonas
2
1.9k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Fireside Chat
paigeccino
41
3.8k
Practical Orchestrator
shlominoach
191
11k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
270
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠