Music on a FiveM loading screen: autoplay, volume and mute
Use an <audio autoplay> element with an MP3 source and set audio.volume to around 0.3 in JavaScript (the HTML attribute cannot set volume). Add a mute button and a slider, save the choice in localStorage, and restore it on the next join. FiveM’s loading screen is allowed to autoplay with sound.
Music sets the tone of a server before a single frame of gameplay, and nothing irritates returning players more than being blasted by the same track at full volume on every join. A good loading screen plays music at a gentle level, lets players change or mute it, and remembers what they chose.
The basic player
<audio id="music" autoplay loop preload="auto">
<source src="music/theme.mp3" type="audio/mpeg">
</audio>
<div class="audio-ui">
<button id="mute" aria-label="Mute music">🔊</button>
<input id="volume" type="range" min="0" max="1" step="0.05" aria-label="Music volume">
</div>const audio = document.getElementById('music');
const mute = document.getElementById('mute');
const slider = document.getElementById('volume');
const saved = JSON.parse(localStorage.getItem('ls-audio') || '{}');
audio.volume = saved.volume ?? 0.3;
audio.muted = saved.muted ?? false;
slider.value = audio.volume;
mute.textContent = audio.muted ? '🔇' : '🔊';
function save() {
localStorage.setItem('ls-audio', JSON.stringify({ volume: audio.volume, muted: audio.muted }));
}
slider.addEventListener('input', () => { audio.volume = Number(slider.value); save(); });
mute.addEventListener('click', () => {
audio.muted = !audio.muted;
mute.textContent = audio.muted ? '🔇' : '🔊';
save();
});The controls need the mouse, so enable it with loadscreen_cursor 'yes' — see interactive loading screens.
Muting without the mouse
Some players never touch the mouse on a loading screen. A key shortcut costs nothing:
window.addEventListener('keydown', (e) => {
if (e.code === 'KeyM') mute.click();
});A small playlist
const tracks = ['music/1.mp3', 'music/2.mp3', 'music/3.mp3'];
let i = Math.floor(Math.random() * tracks.length);
audio.loop = false;
audio.src = tracks[i];
audio.addEventListener('ended', () => {
i = (i + 1) % tracks.length;
audio.src = tracks[i];
audio.play();
});Starting on a random track means returning players do not hear the same opening every time.
Formats and hosting
- MP3 at 128–192 kbps is the reliable choice and is small enough to start at once.
- A three-minute track at 160 kbps is about 3.5 MB.
- Files inside the resource must be listed in
filesin the manifest. - Remote files must be direct HTTPS links — cloud-drive share links return a web page, not audio.
Silence in game is covered step by step in loading screen music not playing.
Fading out at the end
The music stops abruptly when the loading screen closes. A short fade feels far more polished. With manual shutdown, send the page a message just before closing and fade the volume over half a second — the code is in manual shutdown.
Music rights
Playing a commercial song to every player is public performance of that song. Many servers do it; that does not make it licensed. Royalty-free or properly licensed music is the safe choice, especially for servers that take money — see music and copyright.
Common questions
Does music autoplay on a FiveM loading screen?
Yes. Unlike a normal browser tab, the FiveM loading screen may autoplay audio with sound.
How do I lower the loading screen music volume?
Set audio.volume in JavaScript, for example audio.volume = 0.3. HTML has no volume attribute.
How do I remember if a player muted the music?
Save the choice in localStorage and read it when the page loads.
What audio format should I use?
MP3 at 128–192 kbps is the most reliable in FiveM’s loading screen.
Can players mute the music without a mouse?
Only if you add a keyboard shortcut, such as M to toggle mute.
Want a loading screen you never have to debug?
Build it in the browser, export once, and edit it whenever — no HTML, no re-uploads.
Start free