💾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

1. Download the Resource:

   • Download the X_HUD_IngameVoiceUtils resource from the Tebex Store or GitHub.

2. Extract the Folder:

   • Extract the downloaded folder to your FiveM server's resources directory.

3. Update server.cfg:

   • Add the following line to your server.cfg file to ensure the resource starts automatically:ensure X_HUD_IngameVoiceUtils

4. Configure the Settings:

   • Edit configuration/config.lua to configure server-side settings.

   • Edit configuration/config.js to customize the UI appearance and behavior.

   • Edit configuration/translation.lua to add or modify language translations.

5. 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.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)

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.