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
210
ブラウザでテキストを読み上げる
JavaScript/TypeScript 勉強会 in 神戸 の発表資料です。
SAW
April 27, 2024
Tweet
Share
More Decks by SAW
See All by SAW
PHP で学ぶ OAuth 入門
azuki
2
410
EditorConfig を使ってみよう
azuki
1
75
Symfony でサクッと作る REST API サーバー
azuki
1
140
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
170
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
270
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
140
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
360
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
310
Eloquent で relation を扱う基礎
azuki
0
160
Other Decks in Programming
See All in Programming
What's new in AppKit on macOS 26
1024jp
0
180
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
8
1.1k
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
210
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
360
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
590
NEWT Backend Evolution
xpromx
1
170
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
680
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
310
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
720
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
Featured
See All Featured
A better future with KSS
kneath
238
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Faster Mobile Websites
deanohume
308
31k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Bash Introduction
62gerente
613
210k
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
ご清聴ありがとうございました