Display WebPage and AudioFile play in TabBar Application

Sushant — Fri, 23 Jul 2010 10:17:58 +0000

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 
@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 
#import 
#import 
@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

iPhone Tutorial | iPhone iOS4 iPad SDK Development & Programming Blog » Display WebPage and AudioFile Play

Display WebPage and AudioFile play in TabBar Application