テキスト読み上げツールを作る第2回：HTMLとCSSで読み上げツールの画面を作る

はじめに

前回は、フロントエンドだけでテキスト読み上げツールを作る全体像を紹介しました。

今回は、画面に表示する部分を作ります。

読み上げ機能そのものはJavaScriptで実装しますが、その前にユーザーが操作する画面が必要です。

今回作る画面には、次の要素を配置します。

要素	内容
タイトル	ツール名を表示
説明文	何ができるツールか説明
入力欄	読み上げたい文章を入力
音声選択	読み上げ音声を選択
速度	読み上げ速度を調整
高さ	声の高さを調整
音量	音量を調整
操作ボタン	読み上げ、一時停止、再開、停止、クリア
状態表示	現在の状態を表示

テキスト読み上げツール

HTMLの基本構造

まずは、ツール全体を囲む箱を作ります。

<div class="tts-service">
  <h2>テキスト読み上げツール</h2>
  <p class="tts-lead">入力した文章を、ブラウザ上で音声読み上げできます。</p>
</div>

tts-service は、ツール全体にCSSを当てるためのクラス名です。

この中に、入力欄やボタンを追加していきます。

文章入力欄を作る

読み上げたい文章を入力する部分には、textarea を使います。

<textarea id="ttsText" placeholder="ここに読み上げたい文章を入力してください。"></textarea>

textarea は、複数行の文章を入力できるフォーム部品です。

重要なのは、id="ttsText" です。

JavaScript側でこのIDを使い、入力された文章を取得します。

const textArea = document.getElementById('ttsText');

HTMLとJavaScriptをつなぐ目印として、IDを付けています。

音声選択のプルダウンを作る

次に、読み上げ音声を選ぶプルダウンを作ります。

<select id="voiceSelect">
  <option value="">音声を読み込み中...</option>
</select>

音声一覧は、JavaScriptであとから取得します。

そのため、最初は「音声を読み込み中…」という表示だけを入れておきます。

ブラウザが音声一覧を取得できたら、この中身をJavaScriptで入れ替えます。

速度調整スライダーを作る

読み上げ速度は、スライダーで調整できるようにします。

<label>
  速度
  <input type="range" id="rate" min="0.5" max="2" step="0.1" value="1">
  <span id="rateValue">1.0</span>
</label>

各属性の意味は、次の通りです。

属性	内容
type=”range”	スライダーを表示
id=”rate”	JavaScriptから取得するID
min=”0.5″	最小値
max=”2″	最大値
step=”0.1″	0.1ずつ変更
value=”1″	初期値

速度の標準値は 1 です。

0.5 にすると遅くなり、2 にすると速くなります。

声の高さを調整する

声の高さもスライダーで変更できます。

<label>
  高さ
  <input type="range" id="pitch" min="0" max="2" step="0.1" value="1">
  <span id="pitchValue">1.0</span>
</label>

標準値は 1 です。

値を下げると低め、値を上げると高めになります。

ただし、音声の高さの変化は、ブラウザや端末によって差があります。

音量を調整する

音量もスライダーで作ります。

<label>
  音量
  <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
  <span id="volumeValue">1.0</span>
</label>

音量は 0 から 1 の範囲で指定します。

値	内容
0	無音
0.5	半分程度
1	最大

操作ボタンを作る

次に、操作ボタンを作ります。

<div class="tts-buttons">
  <button type="button" id="speakBtn">読み上げる</button>
  <button type="button" id="pauseBtn">一時停止</button>
  <button type="button" id="resumeBtn">再開</button>
  <button type="button" id="stopBtn">停止</button>
  <button type="button" id="clearBtn">クリア</button>
</div>

それぞれのボタンには、JavaScriptから操作するためのIDを付けています。

ID	役割
speakBtn	読み上げ開始
pauseBtn	一時停止
resumeBtn	再開
stopBtn	停止
clearBtn	入力欄を空にする

type="button" を付けている理由は、フォーム送信ボタンとして動かないようにするためです。

状態表示を作る

現在の状態を表示する場所も作ります。

<p id="ttsStatus" class="tts-status"></p>

ここには、JavaScriptで次のような文言を表示します。

読み上げ中です。
一時停止しました。
読み上げを停止しました。
読み上げが完了しました。

ユーザーに現在の状態を伝えるために必要です。

CSSで全体を整える

ここからは見た目を整えます。

まず、ツール全体の見た目です。

.tts-service {
  max-width: 760px;
  margin: 40px auto;
  padding: 28px;
  border: 1px solid #ddd;
  border-radius: 16px;
  background: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

max-width: 760px; により、横に広がりすぎないようにしています。

margin: 40px auto; により、画面中央に配置されます。

入力欄の見た目

#ttsText {
  width: 100%;
  min-height: 180px;
  padding: 14px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.8;
  box-sizing: border-box;
  resize: vertical;
}

ここでは、入力欄を読みやすくしています。

line-height: 1.8; を指定することで、複数行の文章でも見やすくなります。

resize: vertical; は、縦方向だけ高さを変更できる指定です。

設定項目の見た目

.tts-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}

音声選択、速度、高さ、音量の項目を縦に並べています。

gap: 14px; によって、各項目の間に余白を入れています。

ボタンの見た目

.tts-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

ボタンを横並びにし、画面幅が狭い場合は折り返すようにしています。

.tts-buttons button {
  padding: 11px 18px;
  border: none;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

ボタンは、押しやすさを重視して余白を広めにしています。

スマホ対応

スマホでは、ボタンを横幅いっぱいにしたほうが操作しやすくなります。

@media (max-width: 600px) {
  .tts-service {
    margin: 20px auto;
    padding: 20px;
  }

  .tts-buttons button {
    width: 100%;
  }
}

画面幅が600px以下のときだけ、このCSSが適用されます。

まとめ

今回は、テキスト読み上げツールの画面部分をHTMLとCSSで作りました。

ここまでで、次のUIが完成します。

部分	状態
タイトル	完成
説明文	完成
入力欄	完成
音声選択	完成
速度調整	完成
高さ調整	完成
音量調整	完成
操作ボタン	完成
状態表示	完成

ただし、この段階ではまだ音声読み上げは動きません。

次回は、JavaScriptを使って、入力された文章を実際に音声で読み上げる処理を作ります。

eguchi.net