|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Speech Recognition Landing Page</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
background-color: #f5f5f5; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
header { |
|
background-color: #333; |
|
color: #fff; |
|
padding: 20px; |
|
text-align: center; |
|
} |
|
|
|
h1 { |
|
font-size: 36px; |
|
} |
|
|
|
.container { |
|
max-width: 800px; |
|
margin: 0 auto; |
|
padding: 20px; |
|
} |
|
|
|
#output { |
|
background-color: #fff; |
|
border: 1px solid #ccc; |
|
padding: 10px; |
|
margin-top: 20px; |
|
min-height: 150px; |
|
} |
|
|
|
#output p { |
|
margin: 0; |
|
} |
|
|
|
#speechButton { |
|
background-color: #0073e6; |
|
color: #fff; |
|
padding: 10px 20px; |
|
border: none; |
|
cursor: pointer; |
|
font-size: 18px; |
|
} |
|
|
|
#speechButton:hover { |
|
background-color: #005bb7; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<header> |
|
<h1>Speech Recognition Landing Page</h1> |
|
</header> |
|
<div class="container"> |
|
<h2>Speech to Text</h2> |
|
<form id="recordingForm" action="/start-recording" method="POST"> |
|
<button type="submit" id="speechButton">Start Recording</button> |
|
</form> |
|
<div id="output"> |
|
<p id="transcription">Transcription will appear here...</p> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
const speechButton = document.getElementById('speechButton'); |
|
const output = document.getElementById('output'); |
|
const transcription = document.getElementById('transcription'); |
|
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); |
|
|
|
recognition.lang = 'en-US'; |
|
|
|
speechButton.addEventListener('click', () => { |
|
recognition.start(); |
|
speechButton.disabled = true; |
|
speechButton.innerText = 'Recording...'; |
|
}); |
|
|
|
recognition.onresult = (event) => { |
|
const transcript = event.results[0][0].transcript; |
|
transcription.textContent = transcript; |
|
}; |
|
|
|
recognition.onend = () => { |
|
speechButton.disabled = false; |
|
speechButton.innerText = 'Start Recording'; |
|
}; |
|
</script> |
|
</body> |
|
</html> |
