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
48
ブラウザでテキストを読み上げる
JavaScript/TypeScript 勉強会 in 神戸 の発表資料です。
SAW
April 27, 2024
Tweet
Share
More Decks by SAW
See All by SAW
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
20
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
34
GraphQL 入門
azuki
1
53
JavaScript で音声認識を試してみよう
azuki
0
36
Voice Recognition in JavaScript
azuki
0
17
Nuxt で GraphQL のクエリを送信する方法
azuki
2
89
関西の IT 勉強会コミュニティをもっと盛り上げたい!!
azuki
0
64
Postman で GraphQL のクエリを送ってみよう
azuki
0
300
Laravel でモデルの ID を UUID/ULID にする方法
azuki
0
210
Other Decks in Programming
See All in Programming
Git Lint
bkuhlmann
4
770
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1.1k
Going beyond Apache Parquet's default settings
xhochy
0
140
Fragment Composition of GraphQL
quramy
13
1.6k
仕様と実装で学ぶOpenTelemetry
drumato
1
130
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
450
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
Timeline エディター拡張入門
yucchiy
0
260
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
310
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.7k
GitHub Copilotのススメ
marcy731
1
240
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
10k
Music & Morning Musume
bryan
41
5.6k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
A designer walks into a library…
pauljervisheath
201
23k
Design by the Numbers
sachag
274
18k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Fireside Chat
paigeccino
22
2.6k
Product Roadmaps are Hard
iamctodd
45
9.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Building Your Own Lightsaber
phodgson
100
5.7k
The Language of Interfaces
destraynor
151
23k
A Modern Web Designer's Workflow
chriscoyier
689
190k
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
ご清聴ありがとうございました