<h1>音声読み上げデモ</h1>
<div class="main">
  <div class="direction">
    <label for="message">しゃべらせたいセリフを以下に入力<br>(日本語のみ、50字以内)</label>
  </div>
  <div class="chat-area">
    <div class="bio">
      <img id="image" src="https://raw.githubusercontent.com/bpeldi2oerkd8/assets/main/images/site-icon.png" width="50" height="50" alt="site-logo">
    </div>
    <div class="speech-bubbles">
      <textarea id="message" rows="3" cols="30" maxlength="50"></textarea>
    </div>
  </div>
  <div class="bottom-area">
    <button id="play">再生</button>
  </div>
</div>
h1 {
  text-align: center;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.direction {
  margin-bottom: 0.5rem;
}

.chat-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.speech-bubbles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 1rem;
}

.bottom-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}
const message = document.getElementById('message'); // セリフの入力エリア
const playButton = document.getElementById('play'); // 再生ボタン

// 再生ボタンをクリックしたとき、デフォルトの音声で再生
playButton.addEventListener('click', () => {
  const uttr = new SpeechSynthesisUtterance(message.value);
  uttr.lang = 'ja-JP';
  speechSynthesis.speak(uttr);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.