Voice commands shortcuts [All versions]

If you are interested in moving through your forum faster by simply clicking on a button and saying where you want to go, this is the tutorial for you.

1. Go to Admin panel, Modules, HTML & JAVASCRIPT, Javascript codes management and there create a new script. I named my script "Voice commands"
2. Place script on All the pages.
3. Paste this code:

Code:

document.addEventListener('DOMContentLoaded', () => {
                                             
  var userID = _userdata.user_id;
  const baseURL = window.location.origin;
  const pm = '/privmsg?folder=inbox';
  const members = '/memberlist';
  const editProfile = "/profile?mode=editprofile";
                                             
  // Check if browser supports the Web Speech API
  if ('webkitSpeechRecognition' in window) {
    const recognition = new webkitSpeechRecognition();
    recognition.continuous = false;
    recognition.interimResults = false;
    recognition.lang = 'en-US';

    // Start voice recognition
    function startRecognition() {
      recognition.start();
    }

    // Process the result of voice recognition
    recognition.onresult = (event) => {
      const speechResult = event.results[0][0].transcript.toLowerCase();

      if (speechResult.includes('profile')) {
        window.location.href = baseURL + '/u' + userID;
      } else {
        console.log("Command not recognized.");
      }
     
      if (speechResult.includes('private message')) {
        window.location.href = baseURL + pm;
      } else {
        console.log("Command not recognized.");
      }
     
      if (speechResult.includes('members')) {
        window.location.href = baseURL + members;
      } else {
        console.log("Command not recognized.");
      }
     
      if (speechResult.includes('edit')) {
        window.location.href = baseURL + editProfile;
      } else {
        console.log("Command not recognized.");
      }
    };

    // Handle voice recognition errors
    recognition.onerror = (event) => {
      console.error("Speech recognition error:", event.error);
    };

    // Create and style the button at the bottom right corner
    function createVoiceCommandButton() {
      const button = document.createElement('button');
      button.id = 'voice-command-btn';
      button.innerHTML = ''; // Add an icon inside the button (microphone emoji)

      // Apply styles to the button
      button.style.position = 'fixed';
      button.style.bottom = '20px';
      button.style.right = '20px';
      button.style.width = '60px';
      button.style.height = '60px';
      button.style.borderRadius = '50%';
      button.style.backgroundColor = '#007bff';
      button.style.color = '#fff';
      button.style.border = 'none';
      button.style.boxShadow = '0px 4px 8px rgba(0, 0, 0, 0.2)';
      button.style.fontSize = '24px';
      button.style.cursor = 'pointer';
      button.style.display = 'flex';
      button.style.alignItems = 'center';
      button.style.justifyContent = 'center';

      document.body.appendChild(button);

      // Start recognition when the button is clicked
      button.addEventListener('click', () => {
        startRecognition();
      });
    }

    // Create the button once DOM is fully loaded
    createVoiceCommandButton();

    // Start recognition on key press ('P' key in this case)
    document.addEventListener('keydown', (event) => {
      if (event.key.toLowerCase() === 'p') {
        startRecognition();
      }
    });
  } else {
    console.log("Speech recognition not supported by this browser.");
  }
});

Let's look at these variables / constants at the top:

Code:

  var userID = _userdata.user_id;
  const baseURL = window.location.origin;
  const pm = '/privmsg?folder=inbox';
  const members = '/memberlist';
  const editProfile = "/profile?mode=editprofile";

UserID will determine what is user's ID so that he can visit his profile later in the code.
baseURL will give your websites basic url, such as: "www.potatoes.com"
pm, members, editProfile have text in it that will be connected with baseURL so that when voice command is used, it will redirect the user to where it should be.

You can add more constants here depending on where you want to redirect your user. I used basic stuff here (for tutorial purpose only). If you want to add more find in the code

Code: recognition.onresult = (event) => {

There you can see structure like this:

Code:

if (speechResult.includes('profile')) {
        window.location.href = baseURL + '/u' + userID;
      } else {
        console.log("Command not recognized.");
      }

speechResult.includes (WORD YOU WANT TO RECOGNIZE) is a word that will be recognized when the user speaks. If you say that, user will be redirected to a proper URL, as you wanted, of course. If not, there will be a message written in the console. However, you can make this more as an alert if you want user to KNOW it failed and why.
If you want to add more of these for your unique things, just c/p the same template, change the word and the location where the user is redirected.

At the moment, the icon inside the button is microphone but you can alter that with another icon of your chosing. At the moment look up for this line:

Code:

button.innerHTML = '';

Change this html entity.

If you got any questions, ask. Hopefully I made it all easy to read.

Thank you for the wonderful participation.

@كونان2000 Hi

I send to you PM on my forum
These is closed it