There are a lot of twists and turns in the audio field. You have to create your music somehow and then make sure it's in the right format. Some of this is changing in Firefox, but here's what seems to work best. Encode your audio in OGG.
What the heck is OGG? Well, you probably have heard of MP3 music and OGG is like MP3 but is open source and not proprietary. Both MP3 and OGG compress your music to make it smaller without losing any of the quality of the sound. OGG lives at http://www.vorbis.com/. You don't need to understand OGG, you just need to save an audio file to OGG if you are creating it, and convert music files to OGG if you have it in some other format like MP3, WAV, or WMA. A great open source tool for converting audio is Audacity, which lives at http://audacity.sourceforge.net/ Audacity has been around forever and is really a great piece of open source free software.
I'll be working with audio as part of my blog, so I'll just say the tools I like. I've used a lot of audio tools over the years, but right now here is my tool chain.
- Create audio in EnergyXT. This is an inexpensive audio workstation that I like. You can create music pretty easily with it and there's lots of help and tutorials. Find it at http://www.energy-xt.com/. It is on sale for €39. Available for Windows, Mac, Linux, and iOS.
- Right now I'm having fun with Chip Tune Music and my favorite software instrument is ChipSounds at http://www.plogue.com/products/chipsounds/. Not cheap at $95, but there are lots of open source and/or free chip tune instruments. The basic idea is that you add instruments or pre-made loops together to make a song using a workstation like EnergyXT. There are plenty of other workstatons and tons of instruments and loops. For more info on creating music through software, check out http://www.kvraudio.com/. And while you're at it, read Computer Music magazine at http://www.musicradar.com/computermusic/. Music software makes it easy to create music because you can create music bits and combine them together.
- Sometimes I like to combine bits of music I've created in a program that let's me work with several tracks. I like Adobe Audition because I've used it a long time and I use an old version, so you might want to look around. The new Audition is expensive. But I use the old one. I've been meaning to look at Ardor, which is a very cool open source alternative. http://ardour.org/
- And as a final step, I run all the combined tracks through Audacity to tweak and convert. My old copy of Audition doesn't know about OGG. But if you want to work with Firefox OS, you'll want to make OGG your new BFF.
I wrote some simple code that just plays an ogg file. Here it is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Simple Audio
</title>
<script>
// Global variables
var myAudio;
// Load the page.
window.addEventListener("load",
runFirst, false);
// Runs when the page is loaded.
function runFirst() {
console.log("page loaded");
// Create audio object.
// We like OGG.
myAudio = new Audio("oggsong.ogg");
// Listen for fully loaded audio.
myAudio.addEventListener("canplaythrough",
processMyAudio, false);
}
function processMyAudio() {
console.log("audio loaded");
// Play the audio.
myAudio.play();
}
</script>
</head>
<body>
</body>
</html>
This code is pretty simple. Use these steps:
- Make a global variable for your audio object.
- Wait until the page loads.
- Create an audio object and give it an audio file to load.
- Wait until the audio file loads.
- When it loads, play the audio!
Creating the Audio Object
Here's the bit that creates the audio object.
myAudio = new Audio("oggsong.ogg");
This is going deeper into the DOM and is called a constructor. It makes an object and initializes it with the name of an audio file. This is assuming that your song is in the root directory as defined by the app manifest. Specify the folder in the constructor; you don't need to tell the manifest where the audio file is, it will just pull it in the same as an art file. Always make sure that you use the .ogg file extension (and that your file is OGG based.
Waiting for Audio
Here's the bit that waits for the audio to load.
myAudio.addEventListener("canplaythrough",
processMyAudio, false);
It sets up an event listener that is waiting for the canplaythrough event to take place on the audio object. The event is fired when all of the audio is loaded. Read more about it on the new-and-improved truly beautiful Mozilla Developer Network page at https://developer.mozilla.org/en-US/docs/Web/Reference/Events/canplaythrough. No, it isn't an special rule for golfers.
Play the Audio
After all this, the command is simple.
myAudio.play();
The command sits in a function that is called only when the audio is good and ready. For many uses, you could just skip the waiting, but I like to be careful. You don't want to mess up your audio. I've noticed that not all the game I review have working audio and this is sad. Music is such a powerful addition to games and most games that succeed not only have a great game programmer, they have a great artist and a great musician. (And a great web site designer, business manager, and tea boy.)
The song will play once and that's all for now. There's more to the world of HTML Audio, but that's all for now. Stay tuned, but not iTuned!
