Live speech transcription

Just starting out? Need help? Post your questions and find answers here.
dige
Addict
Addict
Posts: 1416
Joined: Wed Apr 30, 2003 8:15 am
Location: Germany
Contact:

Live speech transcription

Post by dige »

hi guys,

with the following code / html you can transcribe speech live with the WebView - amazing! :shock: :D
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
Live_speech_transcription.html

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>
"Daddy, I'll run faster, then it is not so far..."
infratec
Always Here
Always Here
Posts: 7662
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: Live speech transcription

Post by infratec »

Fisrt of all you need a callback for webview to allow automatically the access to the microphone.
This is not easy, I will try to implement this.
Post Reply