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. For the game’s own sounds rather than your own file, the sound list carries 2,202 names.
Questions
Does music autoplay on a FiveM loading screen?
How do I lower the loading screen music volume?
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?
localStorage and read it when the page loads.What audio format should I use?
Can players mute the music without a mouse?
Ready to pick a map?
Twelve themes on three base map styles, $8 each, instant download.
Relevant to what you just read
The tool for this
A drag-and-drop loading screen, hosted for you From Free, built in the browser, exported as a drop-in resource.