The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Voice commands shortcuts [All versions]

3 posters

Go down

Voice commands shortcuts [All versions] Empty Voice commands shortcuts [All versions]

Post by Wizzard September 7th 2024, 9:53 pm

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. Smile

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. blackeye Neutral blackeye
Wizzard
Wizzard
Forumember

Male Posts : 125
Reputation : 23
Language : English

https://net-cafe.forumotion.com/

invisible_fa, SarkZKalie, TonnyKamper, Jucarese, poesia-verses and كونان2000 like this post

Back to top Go down

Voice commands shortcuts [All versions] Empty Re: Voice commands shortcuts [All versions]

Post by كونان2000 September 8th 2024, 5:30 am

Thank you for the wonderful participation. Very Happy

:rose:
كونان2000
كونان2000
Forumember

Male Posts : 284
Reputation : 120
Language : Arabic

https://anime.forumperso.com/

poesia-verses and Wizzard like this post

Back to top Go down

Voice commands shortcuts [All versions] Empty Re: Voice commands shortcuts [All versions]

Post by poesia-verses September 11th 2024, 5:41 pm

@كونان2000 Hi

I send to you PM on my forum
These is closed it
poesia-verses
poesia-verses
Forumember

Male Posts : 571
Reputation : 22
Language : and small english

https://stihi-podval.forumotion.com/

كونان2000 likes this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum