101 lines
2.6 KiB
HTML
101 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Realistic Avatar with TTS Sync</title>
|
|
<style>
|
|
.avatar-container {
|
|
position: relative;
|
|
width: 300px;
|
|
margin: 50px auto;
|
|
}
|
|
/* The base avatar image */
|
|
#avatar {
|
|
width: 100%;
|
|
display: block;
|
|
border-radius: 10px;
|
|
border: 5px solid #ccc;
|
|
}
|
|
/* Overlay for mouth animation (position and size must be adjusted for your image) */
|
|
.mouth-overlay {
|
|
position: absolute;
|
|
bottom: 30px; /* Adjust to position over the mouth */
|
|
left: 50%;
|
|
width: 60px;
|
|
height: 20px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 0 0 30px 30px;
|
|
transform: translateX(-50%);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
/* Keyframe animation for a more natural mouth movement */
|
|
@keyframes speakAnimation {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-50%) scaleY(0.5);
|
|
}
|
|
25% {
|
|
opacity: 1;
|
|
transform: translateX(-50%) scaleY(1.2);
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: translateX(-50%) scaleY(0.8);
|
|
}
|
|
75% {
|
|
opacity: 1;
|
|
transform: translateX(-50%) scaleY(1.1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-50%) scaleY(0.5);
|
|
}
|
|
}
|
|
/* Class added to trigger the animation */
|
|
.mouth-speaking {
|
|
animation: speakAnimation 0.5s infinite;
|
|
}
|
|
button {
|
|
display: block;
|
|
margin: 20px auto;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="avatar-container">
|
|
<!-- Replace "avatar.jpg" with the path to your photo -->
|
|
<img id="avatar" src="ben_10.jpg" alt="Avatar">
|
|
<div class="mouth-overlay" id="mouthOverlay"></div>
|
|
</div>
|
|
<button id="speakBtn">Speak</button>
|
|
|
|
<script>
|
|
// The sentence to be spoken
|
|
const text = "hellow how are you";
|
|
const speakBtn = document.getElementById('speakBtn');
|
|
const mouthOverlay = document.getElementById('mouthOverlay');
|
|
|
|
function speakText() {
|
|
const utterance = new SpeechSynthesisUtterance(text);
|
|
|
|
// When speech starts, add the animation class
|
|
utterance.onstart = () => {
|
|
mouthOverlay.classList.add('mouth-speaking');
|
|
};
|
|
|
|
// When speech ends, remove the animation class
|
|
utterance.onend = () => {
|
|
mouthOverlay.classList.remove('mouth-speaking');
|
|
};
|
|
|
|
window.speechSynthesis.speak(utterance);
|
|
}
|
|
|
|
speakBtn.addEventListener('click', speakText);
|
|
</script>
|
|
</body>
|
|
</html>
|