Overview

Boombox.js has been greatly received by the web development community. One of the limitations of boombox.js is that you must visit the site where the boombox is embedded in order to hear the audiofile. We asked ourselves 'What if you could take your boombox with you across the web?' With that in mind we are releasing Boombox for Chrome™.

Boombox for Chrome™ by Audiofile is a new extension for the Chrome browser. It leverages the amazing functionality of HTML5 along with the extensive API provided by Chrome to give you the ability to bookmark boomboxes and to listen to them no matter where you are on the web.

Usage

Download Chrome

Audiofile strives to make as much of our software cross platform and standards compliant as possible and will continue to do so. We believe that standards foster technical innovation and lead to the greatest experience for the largest group of people.

For this project however we decided to see what was possible if we built an app specifically for the Chrome browser. So to take advantage of this magic you'll need to download the lastest version of Chrome.

Installing Boombox for Chrome™

Now that you're running the latest version of Chrome head on over to the Chrome App Store and get the latest version of Boombox for Chrome™.

Using Boombox for Chrome™ is extremely simple and intuitive. Here's how you do it.

Controls

To open up Boombox for Chrome™ simply click on the icon in the top right of the browser. This will cause the interface to popup and be visable.

The first thing to do is type in the URL of a page which you know has a boombox. Next click 'listen.' Boombox for Chrome™ will go across the network and fetch the paths to the audiofiles from the remote boombox.

Once you see the title of the first song appear in the info box you are ready to listen. Finally use the controls located beneath the info box to play/pause, track forward/backward, and volume up/down.

You'll notice that when you enter a URL and click 'listen' a little blue box with a white number 1 will appear above the Boombox for Chrome™ icon. When you press play the icon will toggle to red and then back to blue again when you pause.

Also when you switch between tracks the number on the icon will show which track you are on. This is just a quick visual way to see the state of your experience with a glance.

Bookmarks

The power of Boombox for Chrome™ is that is is completely distributed. It’s completely up to you to find and listen to whatever you like.

The twist is that you need to remember where the good boomboxes are located so you can listen to them again. We've decided to help you out by adding the ability to bookmark boomboxes to return to later. You can bookmark a boombox in one of two ways.

First—if you are on a page which has an embeded audiofile that you would like to bookmark simply right click to bring up a context menu. On the context menu you will see a Boombox for Chrome™ icon next to 'Bookmark this boombox.' Simply clicking that option will bookmark this boombox.

Second—if you see a link that points to a boombox you can right click on the link to see another context menu. This menu will give you the option to 'Bookmark this boombox link.' Clicking that will create a bookmark to the boombox.

To visit a bookmarked boombox simply click on the Boombox for Chrome™ icon in the top right of the browser to popup the Boombox for Chrome™ Interface. At the bottom right you will see a scrollable list of all your previous bookmarked boomboxes. Simply click on the boombox you want to hear and the input field will be populated with the correct URL. Now click 'listen' and then play and you are listening to your favorite audiofile.

All bookmarks that you create with Boombox for Chrome™ will be saved in a folder called 'Boombox for Chrome™ Bookmarks' on your bookmark bar. To delete any boombox bookmarks simply delete them like you would any other bookmark using the Chrome Bookmark Manager.

Getting your boombox ready for Boombox for Chrome™

Retrofitting your boombox currently in production is also extremely easy. You simply need to add a json file called boombox.json to the same page as the boombox.

If you've used boombox.js then you know that you need to pass in an object literal as an argument to the boombox function which contains paths to the audiofiles you want to jam. That object literal is the exact code that you need to copy into the boombox.json file.

So for example if you have a boombox and are creating it using this code.

Then this is the code you would put in boombox.json.

It's really that easy. We recommend putting some visual indicator that your boombox plays nice with Booombox for Chrome so that user’s can be sure everything will function properly.

To test it out simply bookmark this link (Audiofile.cc/boombox) via the context menu or click that link and bookmark the actual page.

If you are using boombox.js live in production please send me a link and I'll post it in a master list I’m creating.

About

Who

This project was created and is currently being led by Carlos Cardona.

Please join me! ;-]

If you’re interested in helping out here is the Boombox for Chrome™ wishlist:

An exhaustive list of all production boomboxes
A goal of the project is to compile an exhaustive list of all the boomboxes that are live in production. This master list will serve as a starting point for people who are new to the platform

Need help or got a suggestion? Find me in #audiofile on Freenode IRC.

What

The primary goal of this project is to empower the user to take their boombox with them across the web. This software is free and licensed under the MIT Open Source License.

For more projects by Audiofile please check out Audiofile.cc and boombox.js.