HTML5 Audio Is Here (Sorta)

Figuring out how to implement a pure HTML5 Audio solution for my game was quite a chore. I found countless threads and post complaining that audio support is just not there yet and that the best thing to do is use flash based solutions (like the SoundManager 2 script). However, I found other information which lead me to believe it could be done. After much searching and trial and error I figured out something that would work and that would preload the sounds before the game would start. My ultimate solution was pure HMTL5 without the use of a script and used a variety of techniques I gleaned from reading others posts and blogs(mostly stackoverflow).

Here is how I did it:

First I load all the game sounds using HTML audio elements in the body of my page. You have to provide at least a .mp3 file and a .ogg file to be compatible with most browsers. Also, If you plan on doing multi-shot sounds (sounds that can be played overlapping themselves such as a rapid fire gun sound in a game) you will have to load multiple instance of them into separate audio elements (Many of my sounds have 5 or 6 instances of themselves)

<audio id=”gun_sound_1″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
</audio>
<audio id=”gun_sound_2″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
</audio>
<audio id=”gun_sound_3″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
</audio>

Secondly the JavaScript

//Create a counter for the sound
gunSound_counter = 1

//Variable holding the number of audio elements that exist
gunSound_maxNumber = 3;

function playSound_html5(soundName)
{
//Add the counter suffix
soundToPlay = soundName+gunSound_counter;

//Play The Sound
audioElement = document.getElementById(soundToPlay);
audioElement.play();

// For Multi-Shot sounds Increment the counter. If counter is at the max reset to one
if (gunSound_counter >= gunSound_maxNumber)
gunSound_counter = 1;
else
gunSound_counter++;
}

Now when ever I want to play the sound I just call the playSound function and pass it a string with the name of the sound I want to play (without the number suffix).

playSound_html5(‘gun_sound_’);

I am pretty sure there is likely more eloquent ways to do this, but hopefully this can help you get a good start.

Update: Upon reading this it now looks like the SoundManager 2 now offers support (beta) for HTML5 audio. Looks like I will have to check this out on my next game cause sound really was just a pain.

 

Some of the sources I used:
http://stackoverflow.com/questions/1933969/sound-effects-in-javascript-html5
http://stackoverflow.com/questions/2741493/how-do-you-detect-html5-video-events
http://stackoverflow.com/questions/6312714/adding-event-listener-to-audio-html5-tag-in-javascript
http://stackoverflow.com/questions/3566967/how-to-stop-audio-played-by-audio-tag-of-html5
http://diveintohtml5.org/everything.html
http://www.webdeveloper.com/forum/showthread.php?t=194442

Building HTML5 video controls with JavaScript


http://bioinfornetics.blogspot.com/2011/02/how-to-resetrestart-position-of-html5.html

WordPress Archive Widget: Post Count on the same line.

My WordPress theme rendered the page count for the archive widget in the side bar incorrectly.  The page count was showing up on the next line below the link for each month. This looked really tacky to me and it turned into a bit of a chore to figure out how to fix it. I eventually got it working and now the page count correctly shows on the same line to the right of each month.

My solution was to change the get_archives_link() function located in wp-includes/general-template.php on line 842 as follows:

I changed this

$link_html = “\t<li>$before<a href=’$url’ title=’$title_text’>$text</a>$after</li>\n”;

to this

$link_html = “\t<li>$before<a href=’$url’ title=’$title_text’>$text<span style=’color:#999;’>$after</span></a></li>\n”;

NextGen Gallery & NextGen GalleryView Plugin Problems

I have been working on another blog that I intend to include a lot of pictures in. The default wordpress gallery was not meeting my needs so I decided to try some free gallery plugins to see if I could get any of those to work for me. The NextGen Gallery plug-in seemed to fit the bill, and then after a bit more digging I found a plug-in extension called the NextGen GalleryView (yeah I know names are very similar) which did exactly what I wanted.

 After installing and uploading a gallery and adding “[galleryview id=1]” it to one of my posts, the filmstrip / carousel at the bottom of the gallery (the single feature that I was most interested in) was not working properly. The thumbnail images showed up on two different lines which messed up the whole filmstrip. Also, there was a strange black box in between each one of the thumbnails.

 In the dashboard under the NextGen GalleryView options when I would view the example / preview it appeared the whole thing was working just fine. However when I paste in the short code and try to view the blog post itself the filmstrip would be all messed up. I am not a word press expert, but I am assuming that if the gallery preview is working in the dashboard but not your posts, then it is likely a theme conflict you are dealing with.

 To me it seemed like the spacing between each image was off and a HTML bullet was being added into the list between each picture. I troubleshooted (is that a word?) the problem in the Chrome developer tools by disabling the different styles one by one to help me narrow down what was causing the problem. I tried to disable anything that had to do with spacing, margins, padding etc until the filmstrip looked like it should. I eventually found that my chosen theme (Adventure Journal Theme) was adding a margin-left to everything as well as adding a stylized bullet to all the list items on the page.

To solve the spacing problem and get all the thumbnail images on to the same line I set margin to 0px in the “frame” class which is found at about line 63 in wordpress-nextgen-galleryview/GalleryView/css/galleryview.css file

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {}

to

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {margin:0px}

To get rid of the square bullet that was being inserted between each thumbnails I had to edit the style sheet for the theme. For my theme it was located at wp-content/themes/adventure-journal/style.css. I changed

ul li{

list-style:square;

}

to

ul li{

list-style:none;

}

And viola…I now have a working image gallery with an awesome filmstrip at the bottom.  I imagine using this plugin with other themes you might have similar problems which can be solved in similar ways.

HTML5 Game promotion strategy

I have just finished my first game and am now in the process of promoting it. From what I gather, if I were promoting a flash game the process would pretty much involve submitting the game to the many gaming portals and hopefully land a sponsorship or licensing deal. It appears (when it comes to flash games) that as long as you have a reasonably decent game you have a reasonably chance at getting accepted into one of these portals and making some profit. As for HTML5 games, things are completely different. HTML5 is a new technology and there is not yet a whole industry built up to cater to the indie game developer. There are no huge gaming portals (that I could find at least) looking to license/sponsor games done in HTML5. I do believe that HTML5 is the future and will eventually replace flash, but we are not there yet, so I have to come up with a different strategy.

Initially I was trying to promote my game the same way you would promote any other website by trying to get my link in as many places as possible. I was visiting every blog that had anything to do with HTML5 games and trying to spam my link in a comment somewhere. However I came to the realization that doing this is probably is not an incredibly efficient way to go about getting more traffic. My target audience does not go to blogs about HTML5 games and then look through the comments for links to playable games. It is true that links may help improve my search engine rankings a little (maybe) but once again, I am not sure if this really will lead to more visits. When a casual gamer wants to play a casual game they usually are not sure what they want to play and are looking for site where they can browse and try out lots of games easily, kinda like an arcade (hence the popularity of the large gaming portals). They are probably not looking for a site with a single game on it (like mine).

This line of reasoning has led me to conclude that instead of trying to improve my organic search engine rankings for the game(i.e. getting a massive amount of backlinks), My strategy should be focusing on trying to get my game on sites that already have users looking to play games. Below is a list of some of the ideas I have come up with on how to go about doing this.

Social Bookmarking/Sharing (Facebook, Twitter, Google +1)

How many things have you looked at because one of your friends facebook ‘liked’ it? It kinda seems like this may be were the web is heading and I think it wise to try and tap it.

 Apps Sites

I already put the game in the Google Chrome Store. So far I have seen almost no traffic come from the listing, but I do know there are likely a lot of users there looking for games. Beyond the Chrome Store I know that there are many other apps sites/stores that I need to get listed in.

 Submit the game to the HTML5 portals that do exist

There are a handful of smaller gaming portals out there specifically for HTML5 games. They are small and just starting out, but who knows what they will become in the future. I already have gotten into one of them and they send me a few visitors each day.

 Start my own HTML5 portal site.

I am realizing that the is a need for more HTML5 arcade type sites, so why not try and fill it. I am planning on creating more games in the future so it might be a good asset to have to promote future games.

Update: my HTML5 portal site is now completed. You can submit your HTML5 game here.

 HTML5 Design/Promo sites

Due to the newness of the technology there are lots of sites out there which are showcasing HTML5 examples. I think that this is a great way to attract visitors who are looking to try something out. I already made it onto one such site and it has sent me hundreds of visitors.


AsteroidsInc is ready to go


Well at long last I think I am finally ready to release my first game. Check it out at AsteroidsInc.com

 The game was programed entirely in JavaScript using the HTML5 canvas and audio objects. It should require no plugins to play (looks like safari may require quicktime). This was pretty much the first game I have ever programed and I learned a lot and did lots of stuff wrong the first time around (and most likely still have a lot of stuff not quite right). If I write another one it should go a lot smoother. If you play it and have any feedback or find any bugs please let me know.

 At the outset I had even grander designs for the game, but I decided to try and simplify the design so that I could get the game to a releasable state sooner. As it was this beast took me several months of my free time to complete. I estimate it has probably taken me around 200 hours total from start to finish (next time I will try and keep better track of the time).

 So if you refer to my post here on how I plan on accomplishing my goal this marks the completion of step one and two (at least for my first project). I hopefully have created something useful which will attract Visitors & Links.

 Now I plan on trying to figure out the most efficient way to monetize the game and start generating some passive income from it. I am aware that it will likely be a challenge and may not be a simple task to do, but I am determined to see this through. I will keep the graph on the upper right hand corner of the blog updated to track my progress.

Safari not liking the HTML5 Audio

 Well this one threw me for a loop….

 I never use Safari, but in an attempt to make my latest HTML5 Game compatible in all the major browsers I downloaded the PC version of Safari to do some testing and trouble shooting to see if it would work. The game worked well in Chrome, Firefox, and I.E. so I assumed it would just work in Safari. But no, to my surprise it started throwing the following error every time I tried playing one of the audio elements.

 TypeError: ‘undefined’ is not a function (evaluating ‘audioElement.play()’)

 After much frustration I came across a post which indicated that HTML5 audio and video tags will not work in Safari without QuickTime. So much for HTML5 not requiring any plug-ins. I installed QuickTime and to my dismay Safari was now giving me the following error when I tried to start it up.

This application has failed to start because QTCF.dll was not found. Re-installing the application may fix this problem.

After trying to reinstall the the browser (this did not work) I found the QTCF.dll file in the Program Files/QuickTime/QTsystem made a copy of it and put it in Windows/System32. This solve the problem and Safari now started up. I was able to load my game with no more errors playing the audio objects. Safari seemed to handle the canvas object fairly well (although the frame rate on seems to be fairly poor).

Source: http://happyworm.com

Source: http://answers.yahoo.com/question/index?qid=20090912133753AAM60Ur

Include an “or” Operator in a JavaScript Switch Statement

I came across a situation where I needed a switch statement in JavaScript to do the exact same thing in multiple cases. For example:

switch (varAnimal)
{
   case ‘dog’:
   sameFunction();
   break;

   case ‘cat’:
   sameFunction();
   break;

   case ‘bird’:
   sameFunction();
   break;
}

While the above code works, if you have a long list of variables it is highly inefficient. To solve the problem I initially tried to use an “or” operator to try and test for the different values as you would do in an “if” statement. For example:

switch (varAnimal)
{
   case ‘dog’ || ‘cat’ || ‘bird’:
   sameFunction();
   break;
}

However this didn’t work. I found on a forum the below method which appears to accomplish what I was trying to do. It essentially lets you use an “or” operator to test for multiple cases which can save a lot of typing. For example:

switch (varAnimal)
{
   case ‘dog’: case ‘cat’: case ‘bird’:
   sameFunction();
   break;
}

Source: http://www.webdeveloper.com/forum/showthread.php?t=191879

How to find the length of an associative array in JavaScript

So this little tidbit took me a bit by surprise. The .length property does not work on associative arrays in JavaScript. It will return zero no matter how many elements are in the array. Below is a script I found that will correctly return the length of a JavaScript associative array.

 

associativeArrayLength = function(obj)
{
    var size = 0, key;
    for (key in obj)
        {
        if (obj.hasOwnProperty(key)) size++;
        }
    return size;
};

 

Source: http://stackoverflow.com/questions/5223/length-of-javascript-associative-array

Select random element from a Javascript Array

Need to select a random element from a javascript array? The process is fairly straightforward but I was not clever enough to figure it out on my own. First take a random number with Math.random() [which will return a random number between 0 and 1] then multiply this number by the length of the array. You then need to use Math.floor to round the number down to the nearest whole number and voila… you have a random element number. All of this can be included in the square brackets of the array to make more condensed/easy to read code.

For Example

randomElement = testArray[Math.floor(Math.random()*testArray.length)];

 

 

Source: http://www.webmasterworld.com/forum91/2245.htm