• Home
• About
• Services
• Blog
• Contact

Home » Technicate's Blog » Playing sound on a Firefox extension

Over the long break, I had forgotten about a small part of a project that I had to complete by Monday ... happens.  It involved creating a firefox extension that played a "cha-ching" (cash register) sound when a button was clicked.  After thinking to myself .... "The last time I added sound to an internet based application was in 1995 ... " I started planning it out.  I obviously wasn't versed at adding sound to an extension.  I knew that there was plenty of "nsi" objects that HAD TO have the methods to do this.  Without further droning .... here was my approach:

 

Step One: 

The best way to learn how to do anything in the extension world is to install a working extension that has the functionality you're after.  I added a nifty extension that plays the same wav sounds that IE8 plays when pressing "back" and reloading the page.  I changed the jar file in the content directory to a "zip" and uncompressed it. 

Step Two:  

Find the javascript file that would "play" the sound, in my case, it was "noise.js".  There was a function within that file had the exact code I needed.  Here is the snippet for the simple copy and pasters:

var player =
  
Components.classes["@mozilla.org/sound;1"].createInstance(Components.interfaces.nsISound);
var ios 
= Components.classes['@mozilla.org/network/io-service;1'].getService(Components.interfaces.nsIIOService);
var sound = 
ios.newURI('chrome://(YOUR_EXTENSION_NAME)/content/sound.wav', null, null);   
player.play(sound);

var player = Components.classes["@mozilla.org/sound;1"].createInstance(Components.interfaces.nsISound);                        

       var ios = Components.classes['@mozilla.org/network/io-service;1'].getService(Components.interfaces.nsIIOService);

       var sound = ios.newURI('chrome://mpm/content/sound.wav', null, null);

       player.play(sound)

I added the above to my method for my overlay.  The full method is below:

 

makePennyPayment: function(event)

  {

       var id = "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}";

       try{

          var player =
          Components.classes["@mozilla.org/sound;1"].createInstance(Components.interfaces.nsISound);                        

          var ios =
          Components.classes['@mozilla.org/network/io-service;1'].getService(Components.interfaces.nsIIOService);

          var sound = ios.newURI('chrome://mpm/content/sound.wav', null, null);

          player.play(sound);

       }

       catch(e){ alert(e);}

  }

Step Three:

Add the oncommand="[class].makePennyPayment()" to your button in your overlay.xul and test it out.

You should hear your sound!

Hope this helps someone!

 

 

office: (916) 880-1128

toll free: (800) 245-7110

e-mail: info@technicate.com

Home | About | Services | Blog | Contact