<!DOCTYPE html>
<html>
<head>
<title>Voice to Text - Azure Speech</title>
<!-- Add Azure Speech SDK -->
<script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.config-section {
margin-bottom: 20px;
padding: 15px;
background-color: #f5f5f5;
border-radius: 5px;
}
.config-section input {
width: 300px;
padding: 8px;
margin: 5px 0;
border: 1px solid #ddd;
border-radius: 4px;
}
.controls {
margin-bottom: 20px;
display: flex;
gap: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
#stopButton {
background-color: #f44336;
}
#stopButton:hover {
background-color: #da190b;
}
.output-container {
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
min-height: 200px;
margin-bottom: 20px;
}
#interim {
color: #666;
font-style: italic;
}
.status {
margin-top: 10px;
font-size: 14px;
color: #666;
}
.listening {
color: #4CAF50;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<h1>Voice to Text Streaming</h1>
<div class="config-section">
<h3>Azure Speech Service Configuration</h3>
<div>
<label for="subscriptionKey">Subscription Key:</label><br>
<input type="password" id="subscriptionKey" placeholder="Enter your subscription key"><br>
<label for="region">Region:</label><br>
<input type="text" id="region" placeholder="e.g., eastus"><br>
</div>
</div>
<div class="controls">
<button id="startButton">Start Voice Input</button>
<button id="stopButton" disabled>Stop Voice Input</button>
</div>
<div class="output-container">
<div id="final"></div>
<div id="interim"></div>
</div>
<div class="status" id="status">Status: Ready</div>
<script>
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const finalDiv = document.getElementById('final');
const interimDiv = document.getElementById('interim');
const statusDiv = document.getElementById('status');
const subscriptionKeyInput = document.getElementById('subscriptionKey');
const regionInput = document.getElementById('region');
let recognizer;
let finalTranscript = '';
startButton.addEventListener('click', () => {
const subscriptionKey = subscriptionKeyInput.value;
const region = regionInput.value;
if (!subscriptionKey || !region) {
alert('Please enter both subscription key and region');
return;
}
try {
// Create speech configuration
const speechConfig = SpeechSDK.SpeechConfig.fromSubscription(subscriptionKey, region);
speechConfig.speechRecognitionLanguage = 'zh-CN';
// Create audio configuration
const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
// Create speech recognizer
recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);
finalTranscript = '';
finalDiv.textContent = '';
interimDiv.textContent = '';
// Handle recognition results
recognizer.recognizing = (s, e) => {
interimDiv.textContent = e.result.text;
};
recognizer.recognized = (s, e) => {
if (e.result.reason === SpeechSDK.ResultReason.RecognizedSpeech) {
finalTranscript += e.result.text + '\n';
finalDiv.textContent = finalTranscript;
interimDiv.textContent = '';
}
};
recognizer.canceled = (s, e) => {
if (e.reason === SpeechSDK.CancellationReason.Error) {
statusDiv.textContent = `Error: ${e.errorDetails}`;
}
stopRecognition();
};
// Start continuous recognition
recognizer.startContinuousRecognitionAsync(
() => {
startButton.disabled = true;
stopButton.disabled = false;
statusDiv.textContent = 'Status: Listening...';
statusDiv.classList.add('listening');
},
(err) => {
statusDiv.textContent = 'Error: ' + err;
stopRecognition();
}
);
} catch (err) {
statusDiv.textContent = 'Error: ' + err.message;
stopRecognition();
}
});
stopButton.addEventListener('click', () => {
if (recognizer) {
recognizer.stopContinuousRecognitionAsync(
() => {
stopRecognition();
},
(err) => {
statusDiv.textContent = 'Error stopping: ' + err;
stopRecognition();
}
);
}
});
function stopRecognition() {
stopButton.disabled = true;
startButton.disabled = false;
statusDiv.textContent = 'Status: Stopped';
statusDiv.classList.remove('listening');
if (recognizer) {
recognizer.close();
}
}
</script>
</body>
</html>```
网友评论