#Html5 audio javascript code#

This method may not be the best way to go about handling this problem, but we already have the code to reuse and it saves HTTP requests in the long run.

#Html5 audio javascript download#

We will load multiple sound objects into an array and then reuse them, ensuring we don’t download the source audio every time and instead download it a few times at the start of the game. Since using Audio.cloneNode(true) would result in downloading the audio, we will use the same technique we used for solving creating and deleting objects: an object pool (in this case a sound pool). There are a few ways to accomplish sound effects, but all of them have the same drawback: every new Audio element has to download the audio source! At the time of writing this article, I have yet to find a good way to have one audio source play multiple instances without downloading the audio source again. This is because each sound has to play independently from all the others. If you want to have overlapping sounds (such as the laser sound for firing), each sound must be its own Audio element. The second thing to be aware of is using the HTML5 Audio API for sound effects. So we need to ensure that the readyState is 4 before we do anything. If the readyState of the Audio is 0 and you try to set the audio’s currentTime, you will get a DOM exception. Instead, we’ll be using a timed interval to check the readyState of the Audio to ensure that it is ready to play. The API has a good list of events it can detect, but not even canplaythrough works properly. The first thing you should know is that there is no good way to tell if an sound is fully loaded and ready to play. There are two things you should be aware of when using the HTML5 Audio API for game sound. Because of this, we’ll be doing some ‘hackish’ style coding to make everything work properly. The HTML5 Audio API is still a bit funky when it comes to how it implements things. To do this, we’ll be using the HTML5 Audio API to add game sounds. To implement the player score, we add a variable in the Game object and modify the draw() function of the Enemy object to add points to the score whenever the ship is colliding.ĭocument.getElementById('score').innerHTML = ayerScore We also add new styles to position these elements in their correct locations on the screen and make them look nice. We add two new divs underneath the canvas, one for displaying the players score and the other for displaying the game over screen. Please try again with a different browser. Both are done by modifying the HTML page. We’ll start out this tutorial by adding the player score and the game over screen. It will also let you restart the game if you get hit and spawn another wave of enemies when you kill the last one on the screen.

The game now has sound (in the background, when you fire a laser, when you hit an enemy, and when you die) and keeps track of your score. Make sure you click inside the game if the controls aren’t working.

We’ll begin by seeing the final result of this tutorial. We’ll also discuss things you can do on your own to improve the game. In the fifth and final tutorial of the Galaxian Style HTML5 game series, we’ll be finishing up the game by adding details such as player score, a game over screen, infinite enemy waves, and HTML5 audio.