Designing your Java Script Win 8 Store game from scratch: Adding Music
Revision 1.1: Oops, posted the wrong blog entry. 
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: https://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
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.
https://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:
- https://aka.ms/yfurfm
- For HTML5 DOM: https://dev.w3.org/html5/spec/single-page.html#the-audio-element
(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();
})();