Transforming Data Entry: Speech Recognition in Oracle APEX

In this blog, you'll get to know, how to do speech to text conversion in Oracle Apex.

Let's Get Started!

Design UI of Oracle Apex Page

• First of All, Create a Editable Interactive Grid with static id. In my case, the static id is "demoGrid"

• Then Create a region below including 
• A Page item e.g (P3_TA)
• Tap to Speak Button with Static Id (startButton)
• Stop Button with Static Id (stopButton)

 

• On page designer, click on the start button and on right-side panel in the start button's properties. Find the appearance tab and then change the button template to "Text with Icon" and paste this "fa-microphone-slash" against the Icon.

Animation On Buttons

• Right click on the Start button and then click  on "Defined by Dynamic Action". And create "Execute JS Code" in the true action and paste the below code.

var button = apex.jQuery('#startButton');
var icon = button.find('.fa');
if (icon.hasClass('fa-microphone-slash')) {
    icon.removeClass('fa-microphone-slash').addClass('fa-microphone');
    icon.addClass('blink');
} else {
    console.log('Else');
}
button.removeClass('t-Button--primary');
button.addClass('t-Button--danger');

• On Stop button, follow the same step and paste the below code.

var button = apex.jQuery('#startButton');
var icon = button.find('.fa');

if (icon.hasClass('fa-microphone')) {
    icon.removeClass('fa-microphone').addClass('fa-microphone-slash');
} else {
    console.log('Else')
}
button.removeClass('t-Button--success')
button.addClass('t-Button--primary')
icon.removeClass('blink');

• Now go to you page properties, On Inline CSS, Paste the below code (For Button Animation)

/* Define blink animation */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
/* Apply blink animation to the icon */
.fa.blink {
    animation: blink 1s infinite;
}

Speech to Text Conversion

• Also on page properties, paste the below code in "Function & Global Variable Declaration". And the given code is using speech web api of js for conversion. On start button, It start converting voice into English text and the text is set to the Page Item.

document.addEventListener('DOMContentLoaded', function() {
    if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
        console.log('Your browser does not support speech recognition. Please use a compatible browser.');
        return;
    }
    var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    recognition.lang = 'en-US';
    recognition.interimResults = true; 
    recognition.maxAlternatives = 1;
    var recognizing = false;

    document.getElementById('startButton').addEventListener('click', function(event) {
        event.preventDefault();  
        navigator.mediaDevices.getUserMedia({ audio: true })
            .then(function(stream) {
                console.log('Microphone access granted');
                recognition.start();
                recognizing = true;
            })
            .catch(function(error) {
                console.error('Microphone permission denied', error);
                alert('Microphone permission is required for speech recognition.');
            });
    });

    document.getElementById('stopButton').addEventListener('click', function(event) {
        event.preventDefault(); 
        recognition.stop();
        recognizing = false;
        console.log('Speech recognition stopped');
    });

    recognition.onstart = function() {
        console.log('Speech recognition service started');
    };

    recognition.onresult = function(event) {
        var interimTranscript = '';
        for (var i = event.resultIndex; i < event.results.length; ++i) {
            if (event.results[i].isFinal) {
                var finalTranscript = event.results[i][0].transcript;
                apex.item('P3_TA').setValue(apex.item('P3_TA').getValue() + ' ' + finalTranscript);
                console.log('Final speech result: ' + finalTranscript);
            } else {
                interimTranscript += event.results[i][0].transcript;
            }
        }
        console.log('Interim speech result: ' + interimTranscript);
    };

    recognition.onerror = function(event) {
        console.error('Speech recognition error detected: ' + event.error);
    };

    recognition.onend = function() {
        if (recognizing) {
            console.log('Speech recognition service disconnected, restarting...');
            recognition.start();
        } else {
            console.log('Speech recognition service disconnected');
        }
    };
});

Set Value to Interactive Grid

• Right Click on the Page Item, paste the below code . And the give code get value from page item and then set that value to required column of interactive grid. 

var pageItemValue = $v('P3_TA');
var ig$ = apex.region('demoGrid').widget();
var gridView = ig$.interactiveGrid('getViews', 'grid');
var model = gridView.model;
var selectedRecords = gridView.view$.grid('getSelectedRecords');
selectedRecords.forEach(function(record) {
    model.setValue(record, 'DESCRIPTION', pageItemValue);
});

Null the Page Item on Row Initialization [Interactive Grid]

• Create another Event, that triggers when the Row Initialization [Interactive Grid], Selection Type "Region" and Region is  Grid

•  Under above Event, create a action "Set value" and the type is "Javascript Expression" and write "null" in code snippet. And in affected element tab, selection type is "Item" and Pass that Page Item.