[How-to] Custom Loading Screen with Music

FiveM Resource Development & Modding Modding Tutorials
1

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.

1.png896×572 31.2 KB

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.

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

   <audio id="Loading" autoplay loop >
         <source src="music/Loading.ogg" type="audio/ogg">
    </audio>
	<script>
     var vid = document.getElementById("Loading");
     vid.volume = 0.2
    </script>

2.png786×292 19.9 KB

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!

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.

29 Likes
2

Note that it is supposed to be an example resource. You should copy it and modify the copy instead of the original.

2 Likes
3

Yes, thank you for pointing that out.

Also, I just noticed that the music doesn’t seem to be working. It works locally, but not while loading into the server. I’ll look more into this and provide an update later.

1 Like
4

Try converting mp3 to ogg.

5

Tried that and had the same result as the .mp3. It seems that it’s not reading something right.

I thought maybe the music would need to be added to the __resource.lua, but that just causes it to crash.

6

don’t use webbased converters

7

I had the same music file in .mp3 and .ogg, both returned the same result. No converting necessary.

8

What I have on my server is the old loadingscreen folder, with the music in it and I replaced the keks loading screen, added it to the AutoResources and it works.

10

Use Server Adverts for these kind of posts. No need to show off below a [How-to].

2 Likes
11

Apologies, wasn’t intentionally advertising. Was trying to show the sort of out comes you can achieve. Sorry.

12

I did the same thing the other night… My keks __resource—

files {
‘index.html’,
‘keks.css’,
‘due.ttf’,
‘loadscreen.jpg’,
‘music/Loading.ogg’

}

loadscreen ‘index.html’

resource_manifest_version ‘77731fab-63ca-442c-a67b-abc70f28dfa5’

Works great no issues… Music and all

4 Likes
13

https://www.youtube.com/watch?v=HDe6G_id-Qw&feature=youtu.be < short tut

14

This resource [keks] have never functioned used another resource as the loadingscreen…:sweat_smile:

1 Like
15

@cedricalpatch Then explain how this is working for some people who are actually doing it right? and its not [keks] no need for the [ ] …

16

After the last update ( so yesterday ) the loadingscreen no longer works, I’d do a topic once found the solution on a new resource no problem :wink: oh thank you I know for [ ] :joy:

17

The issue I’m having is when I add the audio file to the __resource.lua. My console spits out a bunch of errors and will not start the resource.

1 Like
18

make sure your adding it to the keks __resource and if its in a folder you put that folder before it ie… music/loading.ogg << Its all case sensitive as far as I know

19

Yes, that is what I was doing.

20

Im not able to post the script edits sorry, the video link shows my index.html < use that as reference

21

Yes, I done all that.