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
33
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
34
GraphQL 入門
azuki
1
53
JavaScript で音声認識を試してみよう
azuki
0
37
Voice Recognition in JavaScript
azuki
0
18
Nuxt で GraphQL のクエリを送信する方法
azuki
2
90
関西の IT 勉強会コミュニティをもっと盛り上げたい!!
azuki
0
64
Postman で GraphQL のクエリを送ってみよう
azuki
0
300
Laravel でモデルの ID を UUID/ULID にする方法
azuki
0
210
Other Decks in Programming
See All in Programming
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
1.2k
Productivity is Messing Around and Having Fun
hollycummins
1
140
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
600
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
290
戦略的DDDは重いのか? / Is strategic DDD heavy?
pictiny
0
250
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
6
1k
Deep Dive into React Stream/Serialize
mugi_uno
3
780
最近コードレビューで指摘したこと
forrep
3
100
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
380
Inner Source@DB: Eine Geschichte über Open-Source-Praktiken im DB Konzern
morl99
1
100
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
240
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
580
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
515
39k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Infographics Made Easy
chrislema
238
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
The Invisible Customer
myddelton
114
12k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
It's Worth the Effort
3n
180
27k
Designing with Data
zakiwarfel
96
4.8k
Side Projects
sachag
451
41k
How to Ace a Technical Interview
jacobian
273
22k
Making Projects Easy
brettharned
109
5.5k
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
ご清聴ありがとうございました