Introduction

Hello, fellow developers and Oracle enthusiasts! If you're like me, you're always looking for ways to make your applications more interactive and user-friendly. Today, I'm diving into Oracle Application Express (APEX), one of the most powerful low-code platforms out there, and sharing a practical enhancement: adding a microphone button to the APEX chatbox for voice-to-text input. This feature leverages the browser's Speech Recognition API to let users dictate messages instead of typing them—perfect for accessibility, mobile users, or just speeding up interactions.

As someone who writes on Hashnode, I love exploring tools that bridge traditional database-driven apps with modern web features. In this comprehensive guide, we'll cover:

• A quick overview of Oracle APEX and its chat capabilities.

• Why adding voice input matters.

• Step-by-step implementation using JavaScript and CSS.

• Code explanations, potential customizations, and best practices.

• Testing and browser compatibility notes.

By the end, you'll have everything you need to integrate this into your APEX projects. Let's get started!

What is Oracle APEX?

Oracle Application Express (APEX) is a low-code development platform that allows you to build secure, scalable web applications directly on top of an Oracle Database. It's been around since 2004 (originally as HTML DB) and has evolved into a robust tool used by enterprises worldwide for everything from simple data entry forms to complex dashboards and AI-integrated apps.

Key features of APEX include:

• Rapid Development: Drag-and-drop interfaces, pre-built components, and declarative programming reduce coding time.

• Universal Theme: A responsive, customizable UI framework based on Oracle JET, ensuring apps look great on any device.

• Integration Capabilities: Seamless connections to Oracle Database, REST services, and external APIs.

• Security Built-In: Row-level security, authentication schemes, and encryption out of the box.

• Extensibility: While low-code, you can inject custom JavaScript, CSS, and plugins for advanced functionality.

As of August 2025, APEX is on version 24.1 (with 25.1 previews floating around), introducing enhancements like improved AI assistants, better mobile support, and refined components. One such component is the chat interface, often used in conversational apps, support bots, or internal messaging systems.

The Chatbox in Oracle APEX

APEX comes with a prebuilt "chatbox" as a native out-of-the-box Dynamic Action Show AI Assistant component, but you cannot easily modify it as you wish:

However, with the Universal Theme (UT), APEX provides CSS classes and patterns for chat-like UIs, such as .a-ChatInput-actions for input controls and .a-ChatInput-text for the message textarea. These are commonly used in sample apps or plugins like the "Conversational AI" demo in recent APEX versions, where chatbots powered by Oracle's AI services respond to user queries.

Our focus today is enhancing the input area with voice recognition, assuming you have a chat setup using UT classes.

Why Add a Microphone to the Chatbox?

In a world of Siri, Alexa, and Google Assistant, voice input is no longer a luxury—it's expected. Benefits include:

• Accessibility: Helps users with disabilities, like those with motor impairments.

• Efficiency: Faster for long messages or hands-free use (e.g., in warehouses or field services).

• User Experience: Makes your APEX app feel modern and intuitive.

• Browser-Native: Uses the Web Speech API, no external libraries needed.

Potential use cases in APEX:

• Customer support portals where agents dictate responses.

• Data entry apps for mobile field workers.

• AI chatbots for querying databases via voice.

Now, let's implement it!

Implementation: Adding the Microphone Button

We'll use JavaScript to dynamically inject a microphone button into the chat input actions div. It toggles speech recognition on click, transcribing speech to the textarea. CSS ensures it blends with APEX's Universal Theme.

Prerequisites

• An APEX page with a chat interface Show AI Assistant Dynamic Action.

• 

• 

• Browser support: Chrome, Edge, or Safari (Web Speech API availability).

• Add the code to your page's Function and Global Variable Declaration (for JS) and Inline CSS (for styles).

  

JavaScript Code

Here's the consolidated and optimized JS code. It handles dynamic loading (e.g., for dialogs), prevents duplicates, and supports continuous recognition.

function addMicButtonToChatbox() {
  const actionsDiv = document.querySelector(".a-ChatInput-actions");
  const textarea = document.querySelector(".a-ChatInput-text");

  if (!actionsDiv || !textarea) {
    // Retry until chatbox is rendered
    setTimeout(addMicButtonToChatbox, 300);
    return;
  }

  // Avoid duplicates
  if (actionsDiv.querySelector(".mic-btn")) return;

  // 🎤 Create mic button
  const micBtn = document.createElement("button");
  micBtn.className = "a-ChatInput-button mic-btn u-success"; // ✅ idle = success
  micBtn.title = "Record Voice";
  micBtn.setAttribute("aria-label", "Record Voice");

  const micIcon = document.createElement("span");
  micIcon.className = "a-Icon fa fa-microphone"; // default UT icon (mic)
  micBtn.appendChild(micIcon);

  // Insert before Send button
  const sendBtn = actionsDiv.querySelector(".a-ChatInput-button--send");
  if (sendBtn) {
    actionsDiv.insertBefore(micBtn, sendBtn);
  } else {
    actionsDiv.insertBefore(micBtn, actionsDiv.firstChild);
  }

  // 🎙 Speech Recognition setup
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  let recognition;
  let isRecording = false;

  if (SpeechRecognition) {
    recognition = new SpeechRecognition();
    recognition.continuous = true;  // 🔥 keep listening until stopped
    recognition.interimResults = false;
    recognition.lang = "en-US"; // Change to your preferred language

    recognition.onstart = () => {
      micIcon.className = "a-Icon fa fa-stop"; // switch to stop icon
      micBtn.classList.remove("u-success");
      micBtn.classList.add("u-danger"); // 🔴 recording = danger
      isRecording = true;
    };

    recognition.onend = () => {
      micIcon.className = "a-Icon fa fa-microphone"; // back to mic
      micBtn.classList.remove("u-danger");
      micBtn.classList.add("u-success"); // 🟢 idle
      isRecording = false;
    };

    recognition.onresult = (event) => {
      let transcript = "";
      for (let i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
          transcript += event.results[i][0].transcript;
        }
      }
      if (transcript) {
        textarea.value += (textarea.value ? " " : "") + transcript.trim();
      }
    };

    micBtn.addEventListener("click", (e) => {
      e.preventDefault();
      if (!isRecording) {
        recognition.start();
      } else {
        recognition.stop();
      }
    });
  } else {
    micBtn.disabled = true;
    micIcon.className = "a-Icon fa fa-ban"; // 🚫 not supported
    console.warn("SpeechRecognition not supported in this browser.");
  }
}

// ✅ Run on page load
document.addEventListener("DOMContentLoaded", addMicButtonToChatbox);

// ✅ Run when APEX refreshes or dialog opens (for dynamic chatboxes)
apex.jQuery(document).on("apexafterrefresh", addMicButtonToChatbox);
apex.jQuery(document).on("dialogopen", function (event, ui) {
  if (ui && ui.dialog && ui.dialog.hasClass("a-ChatDialog")) {
    addMicButtonToChatbox();
  }
});

Code Breakdown

• Button Creation: Dynamically adds a button with a microphone icon (using Font Awesome from UT).

• Insertion: Places it before the send button for intuitive placement.

• Speech Recognition:

  • Uses window.SpeechRecognition (or webkit fallback).

  • continuous: true keeps listening until manually stopped.

  • Appends final transcripts to the textarea.

  • Toggles button state (color and icon) for visual feedback.

• Event Handling: Runs on DOM load, APEX refreshes, and dialog opens to handle dynamic UIs.

• Fallback: Disables the button if the API isn't supported.

CSS Code

Add this to style the button as a neat circle, matching APEX's button aesthetics.

.mic-btn {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

This makes the button compact and round, fitting nicely in the actions div.

How It Works in Action

1. Load your APEX page with the chatbox.

2. The script injects the mic button (green with mic icon) when you start typing.

   

3. Click it: Button turns red with a stop icon, and recognition starts.

4. 

   Speak: Your words are transcribed and appended to the textarea.

   

5. Click again to stop.

   

6. Send the message as usual.

If the browser doesn't support it (e.g., Firefox), the button shows a ban icon and is disabled.

Customizations and Best Practices

• Language Support: Change recognition.lang to other codes like "es-ES" for Spanish.

• Interim Results: Set interimResults: true if you want live previews (but it might be noisy).

• Error Handling: Add recognition.onerror to alert users (e.g., "Microphone access denied").

• Permissions: Browsers prompt for mic access—handle denials gracefully.

• APEX Integration: Trigger a dynamic action on transcription to auto-send or process.

• Testing: Use Chrome DevTools to simulate. Test on mobile for real-world use.

• Security: Since this is client-side, ensure sensitive apps use HTTPS (required for Speech API).

• Accessibility: Add ARIA attributes and test with screen readers.

Potential issues:

• Accuracy varies by accent/noise.

• API limits: Some browsers cap session length.

Browser Compatibility

• Supported: Chrome (Android/iOS too), Edge, Safari.

• Not Supported: Firefox, Opera (as of 2025—check updates).

• Polyfills: Consider third-party services like Google Cloud Speech-to-Text for broader support, but that requires API keys and backend integration.

Conclusion

Adding a microphone to your Oracle APEX chatbox is a simple yet impactful way to modernize your apps. With just a bit of JS and CSS, you're tapping into powerful web APIs while staying within APEX's ecosystem. This enhancement not only boosts usability but also showcases how low-code platforms like APEX can be extended for cutting-edge features.

If you try this out, let me know in the comments—did it work seamlessly, or did you tweak it? For more APEX tips, follow me on Hashnode. Happy coding! #orclAPEX