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
460
0
Share
JavaScript で音声認識を試してみよう
Kyoto.js 21 の発表資料です。
SAW
March 13, 2024
More Decks by SAW
See All by SAW
🪝 便利な Property Hooks を 使ってみよう 🪝
azuki
0
47
決済システム超初心者が Stripe に入門している話
azuki
0
85
React Hook Form と Zod によるフォームバリデーション
azuki
0
60
PHP で form-data を POST 以外のメソッドで受け取るには?
azuki
0
74
PHP で学ぶ OAuth 入門
azuki
2
1.2k
EditorConfig を使ってみよう
azuki
1
110
Symfony でサクッと作る REST API サーバー
azuki
1
240
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
370
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
410
Other Decks in Programming
See All in Programming
Liberating Ruby's Parser from Lexer Hacks
ydah
2
1.1k
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
shoheimitani
4
800
PHP で mp3 プレイヤーを実装しよう
m3m0r7
PRO
0
280
LM Linkで(非力な!)ノートPCでローカルLLM
seosoft
0
500
Reactive ❤️ Loom: A Forbidden Love Story
franz1981
2
240
10年分の技術的負債、完済へ ― Claude Code主導のAI駆動開発でスポーツブルを丸ごとリプレイスした話
takuya_houshima
0
2.5k
ハーネスエンジニアリングにどう向き合うか 〜ルールファイルを超えて開発プロセスを設計する〜 / How to approach harness engineering
rkaga
22
13k
KagglerがMixSeekを触ってみた
morim
0
390
iOS機能開発のAI環境と起きた変化
ryunakayama
0
180
実用!Hono RPC2026
yodaka
2
220
Lightning-Fast Method Calls with Ruby 4.1 ZJIT / RubyKaigi 2026
k0kubun
3
370
Angular Signal Forms
debug_mode
0
110
Featured
See All Featured
Side Projects
sachag
455
43k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
130
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
500
A better future with KSS
kneath
240
18k
Building Applications with DynamoDB
mza
96
7k
The browser strikes back
jonoalderson
0
970
WCS-LA-2024
lcolladotor
0
540
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
10k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
64
53k
Building the Perfect Custom Keyboard
takai
2
730
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠