Voice commands shortcuts [All versions]
3 posters
Page 1 of 1
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:
Let's look at these variables / constants at the top:
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
There you can see structure like this:
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:
If you got any questions, ask. Hopefully I made it all easy to read.
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
|
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 = '';
If you got any questions, ask. Hopefully I made it all easy to read.
invisible_fa, SarkZKalie, TonnyKamper, Jucarese, poesia-verses and كونان2000 like this post
Re: Voice commands shortcuts [All versions]
Thank you for the wonderful participation.
poesia-verses and Wizzard like this post
Similar topics
» [Tutorial] Text Shortcuts
» Create shortcuts widget
» Shortcuts Widget Code
» Can i create a page which every member can speak like a voice chat?
» No [Commands] [/Commands]
» Create shortcuts widget
» Shortcuts Widget Code
» Can i create a page which every member can speak like a voice chat?
» No [Commands] [/Commands]
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum