# 【Javascript】 ブラウザだけで音声合成！Web Speech APIの使い方とサンプルコード
> 「Web Speech API」を使えば、追加ライブラリなしでテキストを音声に変換することが可能です。
- Canonical: https://c-a-p-engineer.github.io/web-speech-api-speech-synthesis-sample/
- Published: 2025-04-15T16:00:00.000Z
- Modified: 2025-04-15T16:00:00.000Z
- Categories: JavaScript, Web
- Tags: JavaScript, Web
# ブラウザだけで音声合成！Web Speech APIの使い方とサンプルコード
最近のブラウザには便利な機能がたくさん搭載されています。その中でも「Web Speech API」を使えば、追加ライブラリなしでテキストを音声に変換することが可能です。
今回は、日本語にも対応した音声読み上げデモアプリを作りながら、使い方とカスタマイズ方法を解説します。
コピペですぐ試せるサンプルコード付きなので、ぜひブラウザで動かしてみてください！
---
## DEMO
---
## デモで体験しよう！（簡単 HTML サンプル）
まずは動くサンプルコードをご紹介します。下記のコードをコピーして、`.html` ファイルとして保存し、ブラウザで開いてみましょう。
```html
Web Speech API デモ
音声合成デモ (日本語対応)
```
### ポイント
- テキストを入力して「読み上げる」ボタンを押すだけで音声合成できます。
- 日本語の声がある場合は自動でプルダウンに追加されます。
- スピード（rate）とピッチ（pitch）を自由に変更できます！
---
## コード解説
### 1. 音声合成の準備
```javascript
const synthesis = window.speechSynthesis;
```
ブラウザの音声合成機能を取得します。
### 2. 声のリストを取得して表示
```javascript
function populateVoices() {
const voices = synthesis.getVoices().filter(v => v.lang.startsWith('ja'));
// ...
}
```
`getVoices()` で取得した声のリストから日本語の声だけをフィルタリングしています。
### 3. 読み上げ処理
```javascript
function speakText() {
const utterThis = new SpeechSynthesisUtterance(text);
// ...
synthesis.speak(utterThis);
}
```
入力されたテキストを `SpeechSynthesisUtterance` に渡して再生します。
---
## 声のカスタマイズ方法
### 1. スピードを調整する
```javascript
utterThis.rate = rate; // 0.5 ~ 2
```
低くするとゆっくり、高くすると早口になります。
### 2. ピッチを調整する
```javascript
utterThis.pitch = pitch; // 0 ~ 2
```
声の高さを変更できます。高くすると明るい印象に。
### 3. 声を切り替える
```javascript
const selectedVoice = voices.find(voice => voice.name === selectedVoiceName);
utterThis.voice = selectedVoice;
```
日本語の声の中から選択して使用できます。
---
## 応用編：さらに便利にする
- **停止機能を追加**
- 途中で読み上げを停止できるボタンを追加できます！
```html
```
- **イベントリスナーで完了検知**
- 読み上げ終了を検知してメッセージ表示も可能です。
```javascript
utterThis.onend = () => alert('読み上げが完了しました！');
```
---
## 参考
- MDN Web Docs - SpeechSynthesis
- MDN Web Docs - SpeechSynthesisUtterance
- Web Speech API のサンプルと解説（Qiita）
- Can I use - Web Speech API
---
## まとめ
Web Speech API を使えば、ブラウザだけで簡単に音声合成ができます。今回紹介したサンプルコードをベースに、自分好みにカスタマイズしてみましょう！
読み上げスピードやピッチの調整、停止ボタンの追加など、工夫次第でより便利なアプリが作れますよ。
ぜひあなたのプロジェクトにも活用してみてください！