Shopping Cart
FiveM script How to Custom Loading Screen with Music Modding Tutorials

[How-to] Custom Loading Screen with Music – Modding Tutorials

FiveM Modding Tutorial

Step 1: Inside your server folder navigate to: resources/[test]/keks. It is recommended that you make a copy of this resource and rename it. Do not edit the original.

Step 2: Inside the keks folder, create a folder called music and inside it place your audio you wish to use. For this example I left mine called Loading.ogg. It needs to be in .ogg format to work. Also be aware it is case sensitive.

FiveM script 02111cd23645464b03eed2ab56351576117fce5e

Step 3: Edit index.html and add the following code just below the <body> tag.

   <audio id="Loading" autoplay loop >
         <source src="https://forum.cfx.re/t/how-to-custom-loading-screen-with-music/music/Loading.ogg" type="audio/ogg">
    </audio>
	<script>
     var vid = document.getElementById("Loading");
     vid.volume = 0.2
    </script>

Step 4: Replace loadscreen.jpg with an image of your choice.

Step 5: Double click index.html and it will open in a web browser. You should then see your custom loading screen and hear your custom music.

Step 6: Edit __resource.lua and add the file path to your music. Don’t forget the comma!

FiveM script 8785da1491b12b72326ea0ca74f13c57b5b5ea50

Step 7: Don’t forget to add the resource ‘start keks’ (or whatever you called it if you chose to rename it) to your server.cfg.

aaand that’s all folks. Any questions or issues please ask, I’ll try my best to help.



Original source: https://forum.cfx.re/t/how-to-custom-loading-screen-with-music/5746

Leave a Reply
FiveM ESX Scripts

The best scripts and maps

Best support

Problems? We are there to help!

Wide range of products

We have a wide range of products

100% Secure Checkout

Stripe