💾X_HUD_IngameVoice
🌟 Overview
X_HUD_IngameVoiceUtils is designed to elevate the voice chat experience on your FiveM server. It provides a modern UI for voice controls, warnings for disconnected voice chat, and visual indicators for voice range settings. The system features a WebGL glass effect, making it visually appealing and highly customizable.
✨ Features
Stylish Voice Mute Indicator: Modern glass effect with customizable positioning, animations, and styling.
Voice Warning System: Full-screen warning when voice chat is disconnected.
Voice Range Control: Visual indicators for voice range settings with marker support.
WebGL Glass Effect: Beautiful blur effect behind UI elements for a polished look.
Highly Configurable: Every aspect of the UI can be customized to match your server’s style.
Responsive Design: Automatically adjusts to different screen sizes for a consistent experience.
Multi-language Support: Easy to translate with pre-configured options.
Framework Integration: Works seamlessly with ESX, QB-Core, and standalone setups.
🛠️ Installation
Step-by-Step Guide
Download the Resource:
Download the X_HUD_IngameVoiceUtils resource from the Tebex Store or GitHub.
Extract the Folder:
Extract the downloaded folder to your FiveM server's
resourcesdirectory.
Update
server.cfg:Add the following line to your
server.cfgfile to ensure the resource starts automatically:ensure X_HUD_IngameVoiceUtils
Configure the Settings:
Edit
configuration/config.luato configure server-side settings.Edit
configuration/config.jsto customize the UI appearance and behavior.Edit
configuration/translation.luato add or modify language translations.
Restart Your Server:
Restart your server to apply the changes and load the new resource.
💬 Usage
Player Commands
Mute/Unmute Microphone: Use the configured key (default:
M) to toggle mute/unmute.Change Talk Range: Use the configured key (default:
Z) to cycle through available talk ranges.
Server Exports
The resource provides the following server exports for additional control:
MutePlayer(playerId): Mute a specific player.UnmutePlayer(playerId): Unmute a specific player.ToggleMutePlayer(playerId): Toggle the mute state for a specific player.
⚙️ Configuration
Server-side Configuration (config.lua)
config.lua)Config.VoiceWarning = {
checkInterval = 1000 -- How often to check voice connection (in ms)
}
Config.VoiceControl = {
muteToggle = {
enabled = true,
hotkey = 'M', -- Default key to mute/unmute
notification = true, -- Show notification when toggling mute
showIndicator = true -- Show persistent UI indicator when muted
},
talkRange = {
enabled = true,
hotkey = 'Z', -- Default key to cycle through ranges
ranges = {1.0, 5.0, 15.0, 30.0}, -- Available talk ranges (meters)
defaultIndex = 2, -- Default range index in the ranges array (1-based)
drawMarker = true, -- Whether to draw a marker showing the current range
marker = {
type = 1,
color = {r = 0, g = 0, b = 255, a = 100},
bobUpAndDown = false,
faceCamera = false,
rotate = false,
drawDistance = 50.0,
zOffset = -2.15,
height = 2.25,
displayDuration = 2000
},
notification = true -- Show notification when changing range
},
pauseMenuControl = {
enabled = true,
hideInPauseMenu = true, -- Automatically hide UI when pause menu is active
checkInterval = 500, -- How often to check pause menu state (in ms)
gracePeriod = 15000 -- Time in ms to keep UI hidden after pause menu closes
}
}
Config.Notifications = {
system = 'x_hud_notify',
duration = 5000,
types = {
esx = {
mute = 'error',
unmute = 'success',
range = 'info'
},
qbcore = {
mute = 'error',
unmute = 'success',
range = 'primary'
},
x_hud = {
mute = 'mute',
unmute = 'unmute',
range = 'range'
}
}
}UI Configuration (config.js)
config.js)const Config = {
defaultLang: 'en',
animations: {
fadeInDuration: 300,
fadeOutDuration: 300
},
muteIndicator: {
position: {
vertical: 'bottom',
horizontal: 'center',
verticalPercent: 8,
horizontalPercent: 50
},
layout: {
direction: 'vertical',
iconMargin: 8,
alignItems: 'center'
},
size: {
padding: '12px 18px',
maxWidth: 250,
borderRadius: 8
},
border: {
width: 2,
style: 'solid',
color: 'rgba(121, 121, 121, 0.5)',
glow: {
color: 'rgba(255, 59, 48, 0.7)',
blur: 15,
spread: 3,
intensity: 3
}
},
glass: {
enabled: true,
blurStrength: 4,
opacity: 0.6,
backgroundColor: 'rgba(255, 59, 48, 0.08)',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
shine: {
enabled: true,
color: 'rgba(255, 255, 255, 0.1)',
angle: -25,
animationDuration: 5
}
},
font: {
family: 'Poppins',
weight: 600,
style: 'normal'
},
icon: {
name: 'mic-off-outline',
size: 50,
color: '#ff3b30',
glowColor: 'rgba(255, 59, 48, 0.9)',
glowSize: 8,
marginRight: 12,
pulseColor: 'rgba(255, 59, 48, 0.25)',
pulseSize: {
base: 60,
expanded: 90
},
pulseSpeed: 2
},
text: {
color: 'white',
size: 14,
fontWeight: 600,
letterSpacing: '0.5px',
textShadow: '0 2px 3px rgba(0, 0, 0, 0.5)',
uppercase: true
},
animation: {
type: 'slide',
direction: 'bottom',
duration: 300,
easing: 'ease'
}
},
voiceWarning: {
font: {
family: 'Poppins',
titleWeight: 700,
messageWeight: 500,
style: 'normal'
},
background: {
gradient: {
startColor: 'rgba(70, 70, 70, 0.8)',
endColor: 'rgba(50, 50, 50, 0.8)',
angle: '135deg'
},
shadow: {
primarySize: '150px',
primarySpread: '40px',
primaryOpacity: 0.85,
secondarySize: '80px',
secondarySpread: '20px',
secondaryOpacity: 0.65
}
},
icon: {
size: 120,
color: '#ff3b30',
glowColor: 'rgba(255, 59, 48, 0.9)',
glowSize: {
min: 25,
max: 55
},
pulseSize: {
base: 150,
expanded: 175
},
pulseSpeed: 2,
glowSpeed: 2
},
text: {
title: {
size: 28,
color: '#ff3b30',
glowColor: 'rgba(255, 59, 48, 0.9)',
glowSize: '35px',
shadowColor: 'rgba(0, 0, 0, 0.7)',
letterSpacing: '1px',
singleLine: true
},
message: {
size: 20,
color: 'white',
opacity: 0.9,
letterSpacing: '0.5px',
maxWidth: 350
},
spacing: 55
}
}
};
const WebGLConfig = {
renderResolution: 0.5,
blurStrength: 10,
glassColor: 'rgba(255, 255, 255, 0.1)',
vertexShaderSource: `
attribute vec2 position;
varying vec2 vUv;
void main() {
vUv = 0.5 * (position + 1.0);
gl_Position = vec4(position, 0, 1);
}
`,
fragmentShaderSource: `
precision mediump float;
uniform sampler2D uTexture;
uniform vec2 uResolution;
uniform float uBlurStrength;
varying vec2 vUv;
void main() {
vec2 texelSize = 1.0 / uResolution;
float blurSize = uBlurStrength;
vec4 sum = vec4(0.0);
for (float x = -4.0; x <= 4.0; x++) {
for (float y = -4.0; y <= 4.0; y++) {
vec2 offset = vec2(x, y) * texelSize * blurSize;
sum += texture2D(uTexture, vUv + offset);
}
}
gl_FragColor = sum / 81.0;
}
`,
debug: false
};
window.WebGLConfig = WebGLConfig;🌍 Translations
The script supports multiple languages. You can add or modify translations in the configuration/translation.lua file.
Example Translation Entry
Locales['en'] = {
['voice_not_connected'] = "Voice chat not connected",
['muted'] = "You are now muted",
['unmuted'] = "You are now unmuted",
['range_changed'] = "Talk range changed to: %s meters"
}🔄 Requirements
FiveM Server: Ensure you have a running FiveM server.
pma-voice: This resource requires pma-voice for voice chat functionality.
Last updated