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
ブラウザでテキストを読み上げる
Search
SAW
April 27, 2024
Programming
0
120
ブラウザでテキストを読み上げる
JavaScript/TypeScript 勉強会 in 神戸 の発表資料です。
SAW
April 27, 2024
Tweet
Share
More Decks by SAW
See All by SAW
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
160
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
93
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
260
OSS contributor への第一歩を踏み出すまでの物語
azuki
1
200
Eloquent で relation を扱う基礎
azuki
0
110
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
76
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
63
GraphQL 入門
azuki
1
120
JavaScript で音声認識を試してみよう
azuki
0
200
Other Decks in Programming
See All in Programming
CSC305 Lecture 25
javiergs
PRO
0
130
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
プロダクトの品質に コミットする / Commit to Product Quality
pekepek
2
760
Zoneless Testing
rainerhahnekamp
0
120
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
160
Symfony Mapper Component
soyuka
2
730
Security_for_introducing_eBPF
kentatada
0
110
Jakarta EE meets AI
ivargrimstad
0
230
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
330
As an Engineers, let's build the CRM system via LINE Official Account 2.0
clonn
1
670
ソフトウェアの振る舞いに着目し 複雑な要件の開発に立ち向かう
rickyban
0
890
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
Featured
See All Featured
Faster Mobile Websites
deanohume
305
30k
It's Worth the Effort
3n
183
28k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Fireside Chat
paigeccino
34
3.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
94
GraphQLとの向き合い方2022年版
quramy
44
13k
Speed Design
sergeychernyshev
25
670
A better future with KSS
kneath
238
17k
Documentation Writing (for coders)
carmenintech
66
4.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
ブラウザでテキストを読み上げる JavaScript/TypeScript 勉強会 in 神⼾ 2 0 2 4 /
0 4 / 2 7 SAW
$(whoami) • ⽒名: 加藤 宗⼀郎 (30歳) • ハンドルネーム: SAW •
関⻄の IT エンジニア コミュニティの賑やかし担当 (⾃称) • ⼤阪在住‧愛知出⾝ • X (旧 Twitter): @azuki_eater • 得意分野: Web アプリケーション開発 • Vue, Laravel 2
Web Speech API • Web Speech API は 2種類 •
SpeechSynthesis: テキスト読み上げに関する API • SpeechRecognition: ⾳声認識に関する API • 多⾔語に対応 3
ブラウザでテキスト読み上げ • テキストの読み上げには SpeechSynthesis インタフェースを利⽤ • 読み上げの開始や停⽌ • ⾳声の種類や⾳量‧ピッチなどの設定 4
SpeechSynthesis API の基本的な使い⽅ 1 . SpeechSynthesisUtterance のインスタンスを⽣成 • コンストラクタの引数に読み上げさせる⽂字列を渡す 2
. window.speechSynthesis.speak() で読み上げ • speak() の引数に 1 で⽣成したインスタンスを渡す 5 const utterance = new SpeechSynthesisUtterance('Hello, World.'); window.speechSynthesis.speak(utterance); テキスト読み上げの簡単な実装例
⾔語と⾳声の設定 • SpeechSynthesisUtterance の lang プロパティから設定 • SpeechSynthesisUtterance の voice
プロパティから設定 • SpeechSynthesisVoice オブジェクトを設定 • window.speechSynthesis.getVoices() で取得できるオブジェクトを設定 6 const utterance = new SpeechSynthesisUtterance('こんにちは'); utterance.lang = 'ja-JP'; // ݴޠΛຊޠʹઃఆ utterance.voice = window.speechSynthesis .getVoices() // ར༻ՄೳͳԻΛऔಘ .find((x) => x.lang === 'ja-JP'); // ຊޠͷԻʹߜΓࠐΈ window.speechSynthesis.speak(utterance); テキスト読み上げの⾔語設定
⾳量やピッチなどの設定 • SpeechSynthesisUtterance のプロパティから設定 • ⾳量: volume プロパティ • [0,
1] の範囲で設定可能 (0: 最も⼩さい‧ 1: 最も⼤きい) • 初期値は 1 • ピッチ: pitch プロパティ • [0, 2] の範囲で設定可能 (0: 最も低い‧ 2: 最も⾼い) • 初期値は 1 • 速さ: rate プロパティ • [0.1, 10] の範囲で設定可能 (0.1: 最も遅い‧ 10: 最も速い) • 初期値は 1 7
読み上げの完了を待つ実装の実現 • speechSynthesis.speak() は読み上げの完了を待たない • 読み上げが完了する前に次の⽂が実⾏される • 読み上げが終わるのを待つには Promise を利⽤
• SpeechSynthesisUtterance のイベントハンドラを登録 • onend のイベントハンドラ内で resolve(); を実⾏ • onerror のイベントハンドラ内で reject(); を実⾏ 8
Promise を利⽤して読み上げの完了を待つ実装例 9 const speak = async (text: string) =>
{ return new Promise<void>((resolve, reject) => { const utterance = new SpeechSynthesisUtterance(text); utterance.onend = () => { resolve(); }; utterance.onerror = (e: SpeechSynthesisErrorEvent) => { reject(e); }; window.speechSynthesis.speak(utterance); }); }; SpeechSynthesis API を Promise で wrap console.log('Start speech.'); await speak('Hello, world.'); console.log('End speech.'); wrapper の呼び出し
まとめ • ブラウザの⾳声読み上げ機能を紹介 • ⾔語や⾳量‧ピッチなどの調整⽅法を紹介 • 読み上げを待つ⽅法を説明 • Promise を利⽤した実装⽅法を紹介
10
ご清聴ありがとうございました