Designing your Java Script Win 8 Store game from scratch: Adding Music

Translate This Page

Designing your Java Script Win 8 Store game from scratch: Adding Music

Rate This
  • Comments 1

Revision 1.1: Oops, posted the wrong blog entry.  Smile

Don’t you hate it when you work for a Vice President who understands what you should be doing on the job because the VP is able to do the job and PROVES it.  Geez. Leading a team by knowing the technology.  Well if you are wondering what it is like to work for Microsoft that is what it is like: Knowledgeable Senior management.

But if you want to dig into the JavaScript and HTML5 on Windows 8, then the Win 8 Game Kit is a way to go.

You will need to scroll down to see all of the code.  The code was documented via comments.  This example only add music to a blank template, that’s it. Nothing else.  There is one added HTML Tag, no added classes in the javascript expect for the SoundJS from EaselJS, that’s it, and when the SoundJS objects are used then that is indicated in the code.

For the source code see: http://code.msdn.microsoft.com/Super-Simple-Instructions-87e2cb3c

Problem statement:

Add music to an HTML5/JavaScript that loops when the project opens

Setting up your project:

Create a new JavaScript project and create a new Blank App

image

 

 

Add a mp3 or wav file to sounds, I am using Bob Familiar’s jazz song named Hydrogen into my Sounds folder as you can see.  You might use another one.

I have used asterisk in comments to highlight the code you need to add.  You need to add a reference to the SoundJS.js file and you also need to give the default html page a name, I used the name “canvas”, original right?  Oh well.  If you do not add the canvas id line, then when you run the project, you will get an error on the variable ctx  because the canvas will act like a variable but won’t show “getContextID” in the intellisense.

http://aka.ms/devschool_music_javascript

 

HTML 5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MusicStoreDemo10</title>
 
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>  
 
    <!-- MusicStoreDemo10 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
        
</head>
<body>
    <p>Content goes here</p>
 
    <!--******************************************************-->
    <!--***********You add the following line ****************-->
    <!--*This line names the canvas for use in the javascript*-->    
    <canvas id="canvas"/>
    <!--******************************************************-->
</body>
</html>

JavaScript:

In the Default JavaScript you will need to add code as highlighted with asterisks or flowered comments. (Note: using this depth of comments should not be done professionally, unless the shop you working in uses this depth, most don’t.)

The Audio object is part of the HTML5 DOM, so you may need to read up on how to use it at:

 

 

(function () {
    "use strict";
 
    WinJS.Binding.optimizeBindingReferences = true;
 
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
 
    //*******************************************************
    //** You add these variables canvas and context
    var canvas;
    var ctx;
 
    //*******************************************************
    //** You add the variable musicGame, the            *****
    //** Audio component is part of the SoundJS library ***** 
    //** and assists you with your project building     *****
    var musicGame = new Audio("/sounds/hydrogen.mp3");
    musicGame.loop = true;
    //*******************************************************
 
    
    //*******************************************************
    //** You add the following line to fire the        ******
    //** function initialize (scroll down to see)      ******
    //** This will cause the function initialize       ******
    //** to fire when your DOM is loaded               ******               
    //*******************************************************
    document.addEventListener("DOMContentLoaded", initialize, false);
    //*******************************************************
 
    //******************************************************
    //***** You add the following function              ****
    //***** Where you place the function as long as you ****
    //***** put it above the })(); line                 ****
    function initialize() {
        //**************************************************
        //**** Initialize the Canvas                    ****
        //**** You add the following code               ****
        canvas = document.getElementById("canvas");
        //**************************************************
        //**** You add the following code
        //**** if you do not add                        ****
        //**** <canvas id="canvas"/>                    ****
        //**** to the default.html then you will        ****
        //**** get an error here                        ****
        ctx = canvas.getContext("2d");
        //**************************************************
        //**************************************************
        //**** Add the following code                   ****
        //**** The play is part of the soundjs.js       ****
        //**** library                                  ****
        musicGame.play();
    }
 
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
 
    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };
 
    app.start();
})();
 
Leave a Comment
  • Please add 1 and 5 and type the answer here:
  • Post
  • If you add background music to your game, you might as well add the PlayTo contract. For a few lines of code, your game background music could be playing on your killer DLNA enabled stereo system. PlayTo is my favorite contract. But that's another blog post. :)

Page 1 of 1 (1 items)
Generic Content

Legal Note:

  1. The author, Sam Stokes, is an employee of Microsoft
  2. There is no guarantee that anything I write is correct, I do try to make sure that what I write is correct.
  3. Use anything written in this blog at your own risk
  4. Test what I write about before using the information
  • Sometimes posts will disappear because I realized that they really don't fit with the total chaos of what I write about
  • Links are tested and available on date of publication, what others do with their links are out of my control

Restrictions:

  • Whatever I write on this blog is unedited by management or anyone, which should be obvious from the randomness of the blog.  I simply write about things I like.
  • Microsoft does not restrict me in anyway, so I generallyblather about whatever I want to.
  • For personal reasons I will not write about:
    • Company confidential stuff, mainly because Microsoft is more transparent than any company I have ever worked for.
    • Other people unless they give me permission to write about them