26
April
2011

Background Audio in Appcelerator

When it comes to building an audio based app, one of the most important issues is multi-tasking. When creating an app like this using Titanium Appcelerator you have to keep in mind cross platform compatibility. These days everyone has a smart phone, the problem is making sure you can get it on every one's device. With Appcelerator we can get this app on both iOS and Android platforms. However, each platform handles this task a little differently in terms of code. So, lets build an app that can stream music and play it in the background of our two different phones.

 

1. Create a New Project

Let's start by creating a new project in Titanium. I am going to call it Background Audio.

appcelerator-setup

2. Edit your app.js file

Now open up the app.js file and we are going to change a few lines of code to create our music player. Around line 12 add the url property to our future music player file.

var win1 = Titanium.UI.createWindow({  
    url: 'sound_remote_url.js',
    title:'Tab 1',
    backgroundColor:'#fff'
});

You can also go ahead and delete the label that says 'I am Window 1', lines 22-30.

3. Copy our music player from Kitchen Sink

Now that we have it set up to grab our player file we need to add that file to the Resources directory. Instead of creating a custom player interface we can just copy and paste the one from Appcelerator's Kitchen Sink example. Go to examples/sound_remote_url.js and copy that into our Background Audio's Resources folder.

If you were to run your project in the emulator you should see and be able to play the remote .wav file.

 

4. Edit Info.plist file

Okay, this is where we have to get a little creative and go outside of what Appcelerator normally does for us. You need to navigate to "Background Audio/build/iphone/Info.plist".

info-location

Go ahead and copy this file into your apps root directory (Background Audio). This is what your directory should look like:

resource-folder

Double click on this file to edit it, this will bring up XCode. If you right click you can select "Add Raw Keys/Values". Now right click again and click "Add Row" and select "UIBackgroundModes". You then need to click on the arrow to the left of this and you should see a dropdown of "item 0". Click on the plus sign next to "item 0" and select "audio".
You can also manually add this to file by coping this near the end of Info.plist.

<key>UIBackgroundModes</key>
  <array>
    <string>audio</string>
  </array>

background

There you have it, you can now run this audio in the background of any multi-tasking iOS device.

4. Take Note!

This will not work in your emulator, you have to install this on an actuall device to see it in action.

How to set this up for Android?

Okay, so we now have it working on our iPhone so lets see how to get this to work on the Android.

1. Add a simple Boolean Property

Well most of the time I prefer the iOS UI and capabilities over the Android's, but in this case Android is much simpler when compared to the iOS. Go ahead and open up "sound_remote_url.js" and find line 6 and edit it to have the 'allowBackground' property and set it to true.

// load from remote url
var sound = Titanium.Media.createSound({url:url,preload:true,allowBackground:true});


Ahh.. too easy. You can also download the Resources directory below to see if you have everything in place.

Categories: Tips

Comments (0)

    Leave a comment

    You are commenting as guest. Optional login below.

    Twitter

    No tweets found.