Wednesday, July 22nd, 2009

Jetpack to the future with recording Audio API

Category: JavaScript, Mozilla

<>p>The Jetpack project is still a young ‘un from Mozilla Labs (disclaimer: I work for labs!) but they are moving swiftly indeed, and each new release has a wicked cool new API that let’s you do something you couldn’t easily do before.

With the Jetpack 0.4 release we see two cool APIs:

Audio Recording API

We have a shiny new <audio> tag which is great for playing audio and all, but how about adding the ability for users to easily create audio?

The new Audio Recording API lets you do just that:

javascript
< view plain text >
  1. jetpack.future.import('audio');
  2. jetpack.audio.recordToFile();
  3. var path = jetpack.audio.stopRecording();

Play the local file back with jetpack.audio.playFile() or upload it and just use the audio tag itself.

A great showcase of this is the voice memo jetpack “which lets you annotate any webpage you are looking at with your voice.” Live streaming is even coming soon. Here comes video conferencing the Open Web way?

Page Mods API

Jetpack is a great way to do Greasemonkey-like work. To make it even easier, you need a way to define when the jetpack kicks in etc, and this is exactly what the Page Mods API gives you.

Check out the blacklist example:

javascript
< view plain text >
  1. jetpack.future.import("pageMods");
  2.  
  3. var callback = function(document){
  4.   // check the current time if it is between 9 and 5
  5.   // 'blacklist' the sites in options.matches
  6.   var currentTime;
  7.   var currentHour;
  8.   currentTime = new Date();
  9.   currentHour = currentTime.getHours();
  10.   if (currentHour > 8 && currentHour < 17){
  11.     document.title = "This site is blacklisted. Get some work done!";
  12.     $(document).find("body").css({border:"3px solid #000000"});
  13.     $(document).find("body").children().hide();
  14.     $(document).find("body").prepend($('<h1>Sorry this site is blacklisted until 17:00. sadface.'));
  15.   }
  16.  
  17. };
  18.  
  19. var options = {};
  20. options.matches = ["http://*.reddit.com/*",
  21.                    "http://*.cnn.com/*",
  22.                    "http://*.bbc.co.uk/*",
  23.                    "http://*.dpreview.com/*",
  24.                    "http://dpreview.com/*",
  25.                    "http://*.bloglines.com/*",
  26.                    "http://bloglines.com/*"];
  27. jetpack.pageMods.add(callback, options);

Nice work guys.

Related Content:

Posted by Dion Almaer at 6:15 am
5 Comments

++++-
4.1 rating from 29 votes

5 Comments »

Comments feed TrackBack URI

Very cool!

Comment by stoimen — July 22, 2009

Does this require firefogg, or is that built into Firefox 3.5 and/or JetPack?

Comment by CaptainN — July 22, 2009

@CaptainN you have to download and install a 3rd party plugin, something like grease monkey but better. Personally i think its not very useful if its not native to the browsers.

Comment by cfipilot — July 30, 2009

I agree
very cool

Comment by RawChocolate — July 30, 2009

Leave a comment

You must be logged in to post a comment.