3D Text to Speech
Text to Speech Tool
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
background-color: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transform: perspective(500px) rotateX(5deg);
}
h1 {
font-size: 36px;
color: #333;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.lang-btn {
padding: 10px 20px;
margin: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 15px;
cursor: pointer;
font-size: 18px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transform: scale(1);
transition: transform 0.2s ease-in-out;
}
.lang-btn:hover {
transform: scale(1.1);
background-color: #45a049;
}
textarea {
width: 80%;
height: 150px;
margin-top: 20px;
border-radius: 10px;
padding: 15px;
font-size: 18px;
border: 2px solid #ccc;
resize: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.controls {
margin-top: 20px;
}
button {
padding: 15px 30px;
margin: 10px;
font-size: 18px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transform: scale(1);
transition: transform 0.2s ease-in-out;
}
button:hover {
transform: scale(1.1);
background-color: #0056b3;
}
button:active {
transform: scale(1);
}
audio {
margin-top: 20px;
border-radius: 10px;
width: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
const speakBtn = document.getElementById("speakBtn");
const downloadBtn = document.getElementById("downloadBtn");
const textInput = document.getElementById("textInput");
const audioElement = document.getElementById("audio");
let selectedLanguage = 'en'; // Default language (English)
document.getElementById("english").addEventListener("click", () => {
selectedLanguage = 'en';
});
document.getElementById("bangla").addEventListener("click", () => {
selectedLanguage = 'bn';
});
document.getElementById("hindi").addEventListener("click", () => {
selectedLanguage = 'hi';
});
speakBtn.addEventListener("click", () => {
const text = textInput.value;
if (text) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = selectedLanguage;
speechSynthesis.speak(utterance);
} else {
alert("Please enter some text.");
}
});
downloadBtn.addEventListener("click", () => {
const text = textInput.value;
if (text) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = selectedLanguage;
const audio = new Audio();
audio.src = URL.createObjectURL(new Blob([utterance], { type: 'audio/wav' }));
audioElement.src = audio.src;
} else {
alert("Please enter some text to download.");
}
});
Comments
Post a Comment