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
420
JavaScript で音声認識を試してみよう
Kyoto.js 21 の発表資料です。
SAW
March 13, 2024
Tweet
Share
More Decks by SAW
See All by SAW
React Hook Form と Zod によるフォームバリデーション
azuki
0
20
PHP で form-data を POST 以外のメソッドで受け取るには?
azuki
0
41
PHP で学ぶ OAuth 入門
azuki
2
810
EditorConfig を使ってみよう
azuki
1
89
Symfony でサクッと作る REST API サーバー
azuki
1
200
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
280
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
350
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
160
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
380
Other Decks in Programming
See All in Programming
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
shogo4131
8
2.3k
Go コードベースの構成と AI コンテキスト定義
andpad
0
120
C-Shared Buildで突破するAI Agent バックテストの壁
po3rin
0
380
組み合わせ爆発にのまれない - 責務分割 x テスト
halhorn
1
150
Rediscover the Console - SymfonyCon Amsterdam 2025
chalasr
2
160
Context is King? 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
rkaga
9
1.1k
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
hasibirok0
0
230
AIエージェントを活かすPM術 AI駆動開発の現場から
gyuta
0
400
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
maryang
1
110
まだ間に合う!Claude Code元年をふりかえる
nogu66
5
810
認証・認可の基本を学ぼう前編
kouyuume
0
200
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
6
2.2k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
348
40k
Being A Developer After 40
akosma
91
590k
The Invisible Side of Design
smashingmag
302
51k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
We Have a Design System, Now What?
morganepeng
54
7.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.2k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Mobile First: as difficult as doing things right
swwweet
225
10k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠