<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);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.