Display WebPage And AudioFile Play in TabBar Application

This is the TabBar application. In this application we will see how to display Web page and play audio file in the iPad. We will create this application using TabBar Application Template.

Step 1: Create a TabBar application using template. Give the application name “Tabbar_Videoplay_iPad”.

Step 2: code automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: Xpand classes and notice Interface Builder created the FirstViewController class for you. Expand Resources and notice the template generated a separate nib,FirstViewr.xib, for the “ Tabbar_Videoplay_iPad”.

Step 4: We need to add UIViewController class in the project . Select classes -> Add -> New Files -> Select UIViewController class and give the class name “AudioPlayViewController”. Select corresponding .xib file and targeted for iPad.

Step 5: We have added AudioToolbox and AVFoundation framework in the Frameworks folder.

Step 6: We need to add two music file in the resource folder. Give the name of the music file “sound.aif”,”music.mp3″.

Step 7: In the FirstViewController.h file we have created instance of UIWebView class . So make the following changes in the file.

 

#import <uikit/UIKit.h>

@interface FirstViewController : UIViewController {
IBOutlet UIWebView *webDisplay;
}
@property(nonatomic,retain) UIWebView *webDisplay;

 

 

Step 8: Double click the MainWindow.xib file and open it to the Interface Builder. Select the FirstViewController from the TabBar Controller and bring up Attribute Inspector and delete the NIB name (See the figure 1). Now drag the WebView from the library and place it to the view window (See the figure 2). Select the first tab from the view window and bring up Connection Inspector and connect webDisplay to the Web View (See the figure 3). Save the MainWindow.xib file and close it and go back to the Xcode.

Figure 1

Figure 2

Figure 3

Step 9: Open the FirstViewController.m file and make the following changes in the file.

 

- (void)viewDidLoad {

NSString *urlAddress = @"http://www.google.com";
NSURL *url = [NSURL URLWithString:urlAddress];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[webDisplay loadRequest:requestObj];

[super viewDidLoad];
}

 

 

Step 10: In the AudioPlayViewController.h file , we have import AudioToolbox and AVFoundation framework. Create an instance of  AVAudioPlayer and UIButton class. Define two IBAction method. So make the following changes in the file.

 

#import <uikit/UIKit.h>
#import <audioToolbox/AudioToolbox.h>
#import <avfoundation/AVFoundation.h>

@interface AudioPlayViewController : UIViewController {

SystemSoundID systemSoundID;
AVAudioPlayer *player;
UIButton *StartStopSound;

}

@property (nonatomic, retain) IBOutlet AVAudioPlayer *player;
@property (nonatomic, retain) IBOutlet UIButton *StartStopSound;

- (IBAction) playSound: (id) sender;
- (IBAction) playSong: (id) sender;

 

 

Step 11: Double click the AudioPlayViewController.xib file and open it to the view window. First drag the two Round Rect from the library and place it to the view window and give the name “Play Sound” , “Play Song”. Select the  “Play Sound” button and bring up connection Inspector and drag Touch Up Inside to the File Owner icon select playSound: action. Do the same thing for the “Play Song”  button and select the playSong: action. Connect File’s Owner icon to the “Play Song” button and select StartStopSound. Now save the AudioPlayViewController.xib file, close it and go back to the Xcode.

Step 12: Open the AudioPlayViewController.m file and make the following changes:

 

- (void)viewDidLoad {
NSLog(@"InView did load");
AudioServicesCreateSystemSoundID((CFURLRef)[NSURL fileURLWithPath:[[NSBundle mainBundle]
pathForResource: @"sound" ofType:@"aif"]],
&systemSoundID);

player = [[AVAudioPlayer alloc]
initWithContentsOfURL:[NSURL fileURLWithPath:
[[NSBundle mainBundle] pathForResource:@"music" ofType:@"mp3"]]
error:nil];

[player prepareToPlay];

}

-(IBAction) playSound:(id) sender {

NSLog(@"In Sample");
AudioServicesPlaySystemSound(systemSoundID);
}

-(IBAction) playSong:(id) sender {

if ([[NSString stringWithFormat:@"%@", [StartStopSound titleForState:UIControlStateNormal]] isEqualToString:@"Play Song"]) {
[player play];
[StartStopSound setTitle:@"Stop Song" forState:UIControlStateNormal]; }
else {
[player stop];
[StartStopSound setTitle:@"Play Song" forState:UIControlStateNormal];
}
}

 

 

Step 13: Double click the MainWindow.xib file and open it to the Interface Builder. Select the ViewController from the TabBar Controller  in MainWindow and bring up Identity Inspector and change the class name into AudioPlayViewController and bring up Attribute Inspector, set the NIB name into “AudioPlayViewController”. Now save the MainWindow.xib file, close it and go back to the Xcode.

Step 14: Now Compile the application and run it in the Simulator.

You can Download SourceCode from here Tabbar_Videoplay_iPad

Leave a Comment:

10 comments
Mary says August 17, 2010

The following step is not really clear can you please give some detailed list.
Step 8: Double click the MainWindow.xib file and open it to the Interface Builder. Select the FirstViewController from the TabBar Controller and bring up Attribute Inspector and delete the NIB name . Now drag the WebView from the library and place it to the view window. Select the first tab from the view window and bring up Connection Inspector and connect webDisplay to the Web View. Save the MainWindow.xib file and close it and go back to the Xcode.

Reply
Sushant says August 17, 2010

Thanks, for your reply. I am attaching screen shot for step 8, hope this will help you. If you have any quires then please let us know.

Reply
michael says August 18, 2010

Thanks for the helpful example Sushant.

One area which might be confusing for others to follow is that you use AudioViewController and AudioPlayViewController interchangeably (e.g. “Step 10…” description vs. actual code). Likewise for Tabbar_Videoplay_iPad (Step 1) vs. TabBarApplication_iPad (Step 3). I ended up just downloading and looking at your source code to see which is the correct name.

Reply
michael says August 18, 2010

Thanks for the helpful example Sushant.

One area which might be confusing for others to follow is that you use AudioViewController and AudioPlayViewController interchangeably (e.g. Step 10…description vs. actual code). Likewise for Tabbar_Videoplay_iPad (Step 1) vs. TabBarApplication_iPad (Step 3). I ended up just downloading and looking at your source code to see which is the correct name.

Reply
michael says August 18, 2010

Very sorry for the duplicate posts. I resubmitted a few times because I kept getting ‘invalid security code’ for anti-bot check, but didn’t realize they all went through.

Reply
Sushant says August 20, 2010

michael: Thanks for your comment..!!! Actually this is the iPad development example, before i have posted here as a iPhone development.

And i have modify the Step 3.

Reply
Mary says August 25, 2010

Thanks Sushant, screenshots helped a lot.

Reply
Shelby says September 1, 2010

Hi Sushant,

I love your sample. I have a problem that needs your help. When the webpage displays and I surf down a few pages I don’t seem to have a mechanism to “goBack” and just can’t seem to implement a feature that will do it.

Pulling out what little hair I have left..
Appreciate any help you can give.

Shelby

Reply
Sushant says September 6, 2010

@Shelby: Firstly thanks for your comment!!! In our example, i didn’t implement “goBack” mechanism. If you want to know how to implement “goBack” mechanish, then i have attached the one link.Please check it.

Link: http://books.google.co.in/books?id=zA3KVP761SMC&pg=PA347&lpg=PA347&dq=how+to+goBack+implemented+in+iPhone&source=bl&ots=XSumpAPcHd&sig=WZYn8Vh6TTQTdsypC8d1rsuLgVk&hl=en&ei=NQSFTKaSMJPevQPg0c2bBA&sa=X&oi=book_result&ct=result&resnum=9&ved=0CEcQ6AEwCA#v=onepage&q&f=false

Hope this link will help you.

Reply
Ravi Kiran says January 12, 2011

Thanks Sushant.

I want some more examples which covers the advance topics.

Can u help me pls.

Reply
Add Your Reply