Magic of Speech-to-Text Transcription
Introduction
Are you ready to dive into the incredible world of Speech-to-Text Transcription? 🚀 This technology is more than just a futuristic concept – it's a practical tool that can transform the way we communicate. In this article, we'll guide you through building a Speech-to-Text Transcription web app using HTML, CSS, and JavaScript, so you can see the magic in action.
🔹 The Power of Speech-to-Text Transcription
Speech-to-Text Transcription is the process of converting spoken language into written text. From boosting accessibility to enhancing communication efficiency, its potential is vast and exciting.
Building the Web App: A Step-by-Step Guide
💬 User Interface
📜 HTML Structure
<!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 Transcription</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Speech-to-Text Transcription</h1>
<button id="startButton">Start Listening</button>
<button id="stopButton" style="display: none;">Stop Listening</button>
<p id="transcription"></p>
</div>
<script src="script.js"></script>
</body>
</html>
🎨 CSS Styling
body{
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.container {
background-color: #fff;
border-radius: 20px;
box-shadow: 8px 8px 15px #d9d9d9, -8px -8px 15px #ffffff;
padding: 20px;
width: 80%;
max-width: 600px;
}
button {
background-color: #4caf50;
color: white;
border: none;
border-radius: 10px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s, transform 0.2s;
}
button:hover {
background-color: #45a049;
transform: scale(1.05);
}
#transcription {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
text-align: left;
font-size: 16px;
line-height: 1.4;
max-height: 200px;
overflow-y: auto;
}
📜 JavaScript Magic
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const transcription = document.getElementById('transcription');
let recognizing = false;
let recognition = new window.webkitSpeechRecognition() || new window.SpeechRecognition();
recognition.interimResults = true;
recognition.continuous = true;
recognition.onstart = () => {
recognizing = true;
startButton.style.display = 'none';
stopButton.style.display = 'inline-block';
};
recognition.onend = () => {
recognizing = false;
startButton.style.display = 'inline-block';
stopButton.style.display = 'none';
};
recognition.onresult = event => {
let interimTranscript = '';
let finalTranscript = '';
for (let i = event.resultIndex; i < event.results.length; i++) {
const transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) {
finalTranscript += transcript;
} else {
interimTranscript += transcript;
}
}
transcription.innerHTML = finalTranscript || interimTranscript;
};
startButton.addEventListener('click', () => {
if (!recognizing) {
recognition.start();
}
});
stopButton.addEventListener('click', () => {
if (recognizing) {
recognition.stop();
}
});
Advantages
🔹 Empowering Communication and Accessibility
🔹 In Conclusion: Voice Meets Text
Conclusion
🔹 Seamless Conversion: Witness the transformation of spoken words into written text seamlessly through the power of technology.
🔹 Inclusive Communication: Embrace inclusivity by providing a tool that bridges gaps for individuals with speech-related challenges.
🔹 JavaScript Enchantment: Experience the magic of JavaScript as it orchestrates the conversion of live speech into captivating text.
🔹 Responsive Design: Explore the importance of responsive design, where technology adapts intuitively to human needs.
🔹 Empowerment through Technology: Discover how technology empowers, enables, and elevates our human experience by connecting us in innovative ways.
Feedback/Queries
I hope this article will be useful for you and that you learned something new Please, feel free to drop any questions in the comments below. I would be happy to answer them.
Thanks for reading 💚