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
23
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 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
新宿ダンジョンを可視化してみた
satoshi7190
3
420
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
220
見た目から始める生産性向上
ikumatadokoro
10
1.5k
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
250
VS Code をプロダクトにどう取り込むか
onomax
1
790
Folding Cheat Sheet #4
philipschwarz
PRO
0
110
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
2
150
Domain-Driven Transformation
hschwentner
2
1.5k
Powerfully Typed TypeScript
euxn23
1
410
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.7k
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
460
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
The Mythical Team-Month
searls
217
42k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
For a Future-Friendly Web
brad_frost
172
9k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Being A Developer After 40
akosma
67
580k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Debugging Ruby Performance
tmm1
70
11k
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
ご清聴ありがとうございました