[SOLVED] Using multiple Loading Music

FiveM Resource Development Discussion
1

Hi all, I was wondering if anyone knew how to have multiple loading screen music files that would play randomly each time someone would connect to the server. An example would be Highspeed Gaming and how it plays different music.
Thanks!

2 Likes
2

You could just use JavaScript to generate a random number between 1 and 4 and then have the Audio files named ‘music1’ or something similar.

I’m at work at the moment I’ll create something when I get home.

3

The community at it’s finest ! Keep it up @jdc4992 !

3 Likes
4

Right okay so I’ve created something for you, if you remove the current audio code from your loading screen as this is no longer going to be needed - We’re going to load the audio using javascript.

<script>
    var aud = new Audio();
    var Random = randomNumber(1,2); // Format for this function is randomNumber(min, max)
    aud.src = 'music/Loading' + Random + '.ogg'; // I've put the loading files into 'music' folder and named them Loading1.ogg, Loading2.ogg .e.t.c
    aud.play();
    function randomNumber(min,max)
    {
        return Math.floor(Math.random()*(max-min+1)+min);
    }
</script>

You can use as many as you want, for my test i just used 2.

If you need any help with this let me know and @Boss thanks!

2 Likes
5

@jdc4992 Hey man much appreciated for your work! Also would I just change the max number if I wanted more?

6

Also how would I lower the music volume?

7

Yeah change these number to how ever many music files you have

1 Like
8

Add this to the code for volume after aud.play();

aud.volume = 0.2;
1 Like
9

@jdc4992 Hey man thanks so much! +1

10

This is awesome! I will try it as well… Next question… Random pictures??? possible?

1 Like
11

This is something I’m working on, I’ll post it on here shortly

2 Likes
12

Right okay so at the bottom of your index.html file you need to add this code before the following…

   </body>
</html>

Add this code…

<script>
    document.getElementById("loadscreen").style.backgroundImage = "url('backgrounds/loadscreen" + Random + ".jpg')";
</script>

You will need to find <div class="backdrop"> and change it to this <div id="loadscreen" class="backdrop">

1 Like
13

So would I do the same thing just like the music by doing loadscreen1 etc?

14

Ok, for some reason having the issue as before, can see the picture in index but not when joining server. Yes I have added it to __resource.

15

Paste the contents of resource file here please

16

haha got it working again, I just didn’t add the stupid comma. :smile:

17

dont work for me, what wrong :\

https://gyazo.com/4b6d3cb2a055bb89532a63857a276fb3

finally i have changed the code for that and work

		<audio id="audioplayer">
		</audio>
		<script>
			var lastSong = null;
			var selection = null;
			var playlist = ["music/loading.ogg", "music/loading1.ogg", "music/loading2.ogg"]; // List of Songs
			var player = document.getElementById("audioplayer"); // Get Audio Element
			player.autoplay=true;
			player.addEventListener("ended", selectRandom); // Run function when song ends

			function selectRandom(){
				while(selection == lastSong){ // Repeat until different song is selected
					selection = Math.floor(Math.random() * playlist.length);
				}
				lastSong = selection; // Remember last song
				player.src = playlist[selection]; // Tell HTML the location of the new Song

			}

			selectRandom(); // Select initial song
			player.play(); // Start Song
		</script>
1 Like