[How-to] Custom Loading Screen with Music

FiveM Resource Development & Modding Modding Tutorials
125

unknown I need this can help me?

126

You would need to use a separate mod. I beleive it is the one by @Vespura

127

how do you add the loading screen?

128

Hi, followed every steps but my loading screen still is the ā€œdefaultā€ not even showing this loadingscreen image that weā€™re supposed to see with the statue of happiness.
EDIT: It works, I disabled firewall and no problem anymore !
Thanks for the tutorial

129

thanks

130

You can manipulate the audio element via JavaScript. Making a play/stop and volume control yourself becomes very trivial. Skipping depends on your implementation, but should not be too hard if you have a system in place that can hot-swap audio.

https://www.w3schools.com/tags/ref_av_dom.asp
(See playbackRate and volume).

133

Is there a way to have music automatically play as I have added the following code and the autoplay isnā€™t working.

<script>
    var lastSong = null;
    var aud = new Audio();
    console.log('Loading random song');
    var Random = randomNumber(1,36);
    console.log('Song ID: ' + Random);
    aud.src = 'music/' + Random + '.mp3';
    aud.volume = 0.5;
    aud.autoplay = true;
    console.log('Playing');
    aud.addEventListener("ended", nextRandSong);

    function randomNumber(min,max)
    {
      return Math.floor(Math.random()*(max-min+1)+min);
    }

    function nextRandSong(){
        console.log('Stopped');
        console.log('Loading new random song');
        Random = randomNumber(1,36);
        console.log('Song ID: ' + Random);
        aud.src = 'music/' + Random + '.mp3';
        aud.play();
        console.log('Playing');
    }
</script>

I have also found out that the logo isnā€™t loading either thoughts?

134

Thank you.
Everything works perfectly, but the music doesnā€™tā€¦ Iā€™ts an .ogg file and worked in Microsoft Explorer (the html), but doesnā€™t in FiveM.

135

In fact, instead of Loading.ogg, type Loading.mp3. You will see it working

136

Sadly I donā€™t get to hear the music, hereā€™s what I used:

<html>
    <head>
        <link href="keks.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <audio id="Loading" autoplay loop >
        <source src="music/Polizistensohn.mp3" type="audio/ogg">
    </audio>
    <script>
        var vid = document.getElementById("Loading")
        vid.volume = 0.5
        vid.autoplay = true
    </script>
        <div class="backdrop">
            <div class="top">
                <h1 title="Free Mode">Rule RP</h1>
                <h2 title="Not Algonquin">RuleRP.net</h2>
            </div>

            <div class="letni">
                <h2 title="INTEL">Intel</h2>
                <h3></h3>
                <div class="loadbar"><div class="thingy"></div></div>
                <p>Where rule is law</p>
            </div>
            <div class="bottom">
                <div id="gradient">
                </div>
            </div>
        </div>

<script type="text/javascript">
// this will actually restart the loading bar a lot, making multiple loading bars is an exercise to the reader... for now.
// for a set of possible events, see https://github.com/citizenfx/fivem/blob/master/code/components/loading-screens-five/src/LoadingScreens.cpp
var count = 0;
var thisCount = 0;

const emoji = {
    INIT_BEFORE_MAP_LOADED: [ 'šŸ‰' ],
    INIT_AFTER_MAP_LOADED: [ 'šŸ‹', 'šŸŠ' ],
    INIT_SESSION: [ 'šŸ', 'šŸ…', 'šŸ†' ],
};

const handlers = {
    startInitFunctionOrder(data)
    {
        count = data.count;

        document.querySelector('.letni h3').innerHTML += emoji[data.type][data.order - 1] || '';
    },

    initFunctionInvoking(data)
    {
        document.querySelector('.thingy').style.left = '0%';
        document.querySelector('.thingy').style.width = ((data.idx / count) * 100) + '%';
    },

    startDataFileEntries(data)
    {
        count = data.count;

        document.querySelector('.letni h3').innerHTML += "\u{1f358}";
    },

    performMapLoadFunction(data)
    {
        ++thisCount;

        document.querySelector('.thingy').style.left = '0%';
        document.querySelector('.thingy').style.width = ((thisCount / count) * 100) + '%';
    },

    onLogLine(data)
    {
        document.querySelector('.letni p').innerHTML = data.message + "..!";
    }
};

window.addEventListener('message', function(e)
{
    (handlers[e.data.eventName] || function() {})(e.data);
});
</script>
    </body>
</html>
137

Simply, rename the mp3 to .ogg and in the file

138

I tried that. Didnā€™t work :confused:

139

Couldnā€™t load resource keks
I need help!!

140

just to check. we make a copy of the keks folder and edit the copy current

142

< div id=ā€œmusicā€ >< embed src=ā€œmusic\Loading.oggā€ autostart=true loop=false>< /div> use this instead it works for the fivem browser i added spaces by the < so delete those for the code to work

143

thats what I get

144

where exactly did you put that ?

145

How can I put a background video?

146

Couldn t find resource keks :frowning: I typed start keks and error appeard

147

@Deziel0495