Live speech transcription
Posted: Fri Sep 27, 2024 8:42 am
hi guys,
with the following code / html you can transcribe speech live with the WebView - amazing!
How would you have to extend the html and the Purebasic code so that the text is transmitted to Purebasic?
Live_speech_transcription.html
with the following code / html you can transcribe speech live with the WebView - amazing!
How would you have to extend the html and the Purebasic code so that the text is transmitted to Purebasic?
Code: Select all
OpenWindow(0, 100, 100, 400, 400, "Live speech transcription", #PB_Window_SystemMenu | #PB_Window_Invisible)
WebViewGadget(0, 0, 0, 400, 400)
SetGadgetText(0, "file://c:/temp/Live_speech_transcription.html")
Repeat
Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow
Code: Select all
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Sprachtranskription</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background-color: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#result {
margin-top: 1rem;
min-height: 100px;
border: 1px solid #ccc;
padding: 1rem;
border-radius: 5px;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Live Sprachtranskription</h1>
<button id="start">Aufnahme starten</button>
<button id="stop" disabled>Aufnahme stoppen</button>
<div id="result"></div>
</div>
<script>
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
const resultDiv = document.getElementById('result');
let recognition;
if ('webkitSpeechRecognition' in window) {
recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'de-DE';
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;
}
}
resultDiv.innerHTML = finalTranscript + '<i style="color: #999;">' + interimTranscript + '</i>';
};
recognition.onerror = (event) => {
console.error('Fehler bei der Spracherkennung:', event.error);
};
startButton.onclick = () => {
recognition.start();
startButton.disabled = true;
stopButton.disabled = false;
};
stopButton.onclick = () => {
recognition.stop();
startButton.disabled = false;
stopButton.disabled = true;
};
} else {
startButton.style.display = 'none';
stopButton.style.display = 'none';
resultDiv.innerHTML = 'Leider wird die Spracherkennung von Ihrem Browser nicht unterstützt.';
}
</script>
</body>
</html>