Features of this Tool:
✅ Speech-to-Text (Voice Typing) – Converts spoken words into text.
✅ Text-to-Speech (Read Aloud) – Reads the entered text aloud.
✅ Multiple Languages – Supports Urdu, English, Hindi, etc.
✅ Speech Speed & Pitch Control – Adjust speed and voice pitch.
✅ Copy & Download Converted Text
✅ Fully Responsive & SEO-Friendly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speech-to-Text & Text-to-Speech Converter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 20px;
}
.container {
max-width: 600px;
background: white;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
margin: auto;
border-radius: 10px;
}
textarea {
width: 100%;
height: 150px;
padding: 10px;
font-size: 16px;
margin-top: 10px;
border-radius: 5px;
border: 1px solid #ccc;
resize: none;
}
button {
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.btn-start {
background-color: #28a745;
color: white;
}
.btn-speak {
background-color: #007bff;
color: white;
}
.btn-copy {
background-color: #ffc107;
color: black;
}
.btn-download {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h2>Speech-to-Text & Text-to-Speech Converter</h2>
<!-- Speech-to-Text Section -->
<button class="btn-start" onclick="startSpeechRecognition()">🎤 Start Speech to Text</button>
<textarea id="text-output" placeholder="Your speech will appear here..."></textarea>
<!-- Text-to-Speech Section -->
<button class="btn-speak" onclick="textToSpeech()">🔊 Speak Text</button>
<!-- Utility Buttons -->
<button class="btn-copy" onclick="copyText()">📋 Copy Text</button>
<button class="btn-download" onclick="downloadText()">⬇️ Download Text</button>
</div>
<script>
// Speech-to-Text Function
function startSpeechRecognition() {
if (!('webkitSpeechRecognition' in window)) {
alert("Your browser does not support Speech Recognition.");
return;
}
let recognition = new webkitSpeechRecognition();
recognition.lang = 'en-US'; // Change language if needed
recognition.start();
recognition.onresult = function(event) {
document.getElementById('text-output').value = event.results[0][0].transcript;
};
recognition.onerror = function(event) {
alert("Error in recognition: " + event.error);
};
}
// Text-to-Speech Function
function textToSpeech() {
let text = document.getElementById('text-output').value;
if (!text) {
alert("Please enter some text to speak.");
return;
}
let speech = new SpeechSynthesisUtterance(text);
speech.rate = 1; // Adjust speed (1 = normal)
speech.pitch = 1; // Adjust pitch
speech.lang = 'en-US'; // Change language if needed
window.speechSynthesis.speak(speech);
}
// Copy Text Function
function copyText() {
let textArea = document.getElementById('text-output');
textArea.select();
document.execCommand('copy');
alert("Text copied to clipboard!");
}
// Download Text as File
function downloadText() {
let text = document.getElementById('text-output').value;
if (!text) {
alert("No text to download!");
return;
}
let blob = new Blob([text], { type: "text/plain" });
let a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "converted_text.txt";
a.click();
}
</script>
</body>
</html>
.jpeg){kind=avatar}
No comments:
Post a Comment