This code works as expected the loaded variable increases as the files finish loading.
The next step is to check when the loading is done and then append a button for the user to press to start the scene and call the init function.
To check if the loading is done you simply need to check that the loaded var is greater than or equal to the totalNeededToLoad var.
The only thing left to do is create a visual for the loading bar. This can be done through css, making a bar with its width equal to 100% divided by totalNeededToLoad and then as each file loads increment the width by this found fraction.
I have been searching around for way of creating a loading screen. Nearly every game has a loading screen, but there does not seem to be a set way of implementing it. Three.js has a loading screen scene type of thing but you need to create a two separate scenes, one for the loading and then the main scene that can be initiated after all of the files have been loading. This seems overly complicated and wont add much value to my project but will consume a lot of valuable time at this point.
From all of this research I have decided that I may be able to create my own loading screen.
In order to fix the latency problem, I created a buffer function which downloads all of the files into the users cache then I can call the sounds as many times as needed without having to downloading them any duplicate times thus stopping the latency issue I was previously experiencing.
If I have time later I plan to pass the mass of the collision object as a parameter of the play sound function. With this parameter I could then control to pitch value of the sound through another node, which will give the user indication of the size of the object they have collided with through sound.
Over all I am happy with how my sounds are working. I am not so happy with the setTime function I’ve used to call my ambient track a couple of seconds after initialisation. If the user has a slow internet connection then the sound may still not have loaded by the time the timeout function is called so the track may not play.
I am going to look into creating a loading screen, which will load my sound and image files before the user can initiate my project.
I was happy with the way my sounds worked, for on collision the correct sound played. However I started to experience some latency on collision. I could only think that it was caused by the sounds for that’s all that I had changed since it ran at a constant 60fps.
I conducted some more research and found that I was not caching my sounds so they were being re-downloaded on every collision so I set out to fix this problem.
The creation of the toggle button didn’t work quite as well as I had presumed. On init I called the ambient loop to play however I didn’t do this through the toggle function. I called the original sound to play on init so when the toggle button is pressed to stop the track, it starts another version of the ambient track to play simultaneously instead. This was a simple fix in the end even though it took me a while to figure it out. Instead of calling the play sound function I simply called the toggle function on init as an alternative.
Within the HTML5 Audio API you can add sound nodes to influence the sound file. The most simple of these is the gain node which is used for volume.
To use the gain node, you create it then attach the sound file to the node and then the node to the sound destination instead of just attaching the sound file to the destination. You can then change the gain nodes value on the fly, like I have done with my slider.
The play/pause button was even simpler, create a button that checks if the sound is playing if it is then stop it other play it.
Also as a temporary fix to the bug i have used a setTimeout function to call the play ambient track function 2 seconds after the init is called.
I’ve introduced the ambient track with a loop into my scene, the set up was fairly complicated in my games init function I’ve added a setTimeout function so that the sound plays after the game has loaded the sound file. At first the sound didn’t play and it was throwing up an error that the file was not there. After some debugging I found that the file had not finished loading before it was called to play.
My next task is to introduce volume control and a play/pause toggle button and fix this bug.