IOS開發之簡單音頻播放器

IOS開發之簡單音頻播放器
  今天第一次接觸IOS開發的UI部分，之前學OC的時候一直在類比的使用Target-Action回調模式，今天算是真正的用了一次。為了熟悉一下基本控制項的使用方法，和UI部分的回調，下面開發了一個特別簡易的音頻播放器，來犒勞一下自己這一天的UI學習成果。在用到UI的控制項時如果很好的理解之前部落格在OC中的Target-Action回調模式，感覺控制項的用法會很順手。下面的簡易播放器沒有用到多高深的技術，只是一些基本控制項和View的使用。         話不多說簡單的介紹一下今天的音頻播放器。在播放器中我們用到了UIProgressView(進度條)來顯示音訊播放進度，用UILabel顯示播放的目前時間和總時間。用UIImageView和UIImagel來加入圖片，用UISegmentedControl來控制播放和暫停，用滑動器UISlider來控制音訊音量。上面的動作項目都是UIKit中的組件，我們要定時的擷取音訊播放時間，我們還要用到NSTimer來定時擷取CurrentTime。播放器怎麼能少的了關鍵的組件呢，我們還需要引入架構AVFoundation.framework。我們會用到組件AVAudioPlayer來播放我們的音頻。         下面是簡易音頻播放器的：                ​    ​    ​    ​    ​    ​                ​1.功能介紹：     ​    ​點擊播放會播放預設歌曲，同時顯示播放進度和播放目前時間，下面的slider可以調節音訊聲音大小。     ​     ​2.主要開發過程     ​    ​    ​1.在我們的XCode中建立一個SingleView的iPhone的工程，為了更好的理解和配置控制項和view,就不使用storyboard來進行控制項的拖拽啦。在我們建立工程下面的ViewController.m編寫我們的代碼，為了隱藏我們音頻播放器使用的控制項和控制項回調的方法，我們在ViewController.m中用延展來對我們的組件和方法進行聲明。代碼如下：  #import "ViewController.h" @interface ViewController () //添加背景用的ImageView@property (strong, nonatomic) UIImageView *backView; //播放進度條@property (strong, nonatomic) UIProgressView *progress; //選項卡按鈕，賦值播放和暫停@property (strong, nonatomic) UISegmentedControl * segment; //slider，用滑動器來設定音量的大小@property (strong, nonatomic) UISlider *slider; //timer，來更新歌曲的目前時間@property (strong, nonatomic) NSTimer *timer; //顯示時間的lable@property (strong, nonatomic) UILabel *label; //加入圖片，中間的圖片@property (strong, nonatomic) UIImageView *imageView; //聲明播放器，來播放我們的音頻檔案@property (strong, nonatomic) AVAudioPlayer *player; //在暫停和播放時回調此按鈕-(void)tapSegment; //更新歌曲時間-(void)time; //改變聲音大小-(void) changeVo; @end      ​    ​2.上面是我們的延展部分，來進行我們的組件的聲明和方法的聲明，具體的實現就寫在本檔案中的@implementation中，我們把組件的實現和配置寫在-(void) viewDidLoad;方法中，該方法會在主視圖載入完畢後執行。在編寫實現代碼之前我們要把我們用到的媒體檔案拖入到我們的Project中，下面是具體代碼的實現。     ​    ​    ​1.下面的代碼是為我們的應用添加背景圖片，也就是我們上面圖片中的黑色背景圖片，在初始化ImageView的時候我們知道view的位置和大小CGRectMack(x, y, width, height); 用Image來通過圖片檔案的名稱來載入我們的圖片，把圖片視圖插入到主視圖的最底層，同時設定其index來實現，代碼如下。  /*添加背景圖片*///初始化ImageView,並設定大小self.backView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 20, 320, 480)];//載入圖片，我們的圖片名為backgroundUIImage *backImage = [UIImage imageNamed:@"background"];//添加背景圖片到ImageViewself.backView.image = backImage;//把ImageView添加到view的最底層[self.view insertSubview:self.backView atIndex:0];     ​    ​    ​2.初始化我們的進度條並設定進度條的位置和大小，對進度值初始化為零。同時把進度條通過addSubView加入到我們的主視圖中  /*執行個體化進度條,並添加到主視圖*/self.progress = [[UIProgressView alloc] initWithFrame:CGRectMake(30, 60, 240, 10)];[self.view addSubview:self.progress];self.progress.progress = 0;      ​    ​    ​3.添加中間的圖片，和添加背景圖片相似，在這就不贅述了代碼如下：  //添加中間的圖片  self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(80, 90, 160, 150)];  UIImage *image = [UIImage imageNamed:@"image.png"];  self.imageView.image = image;  [self.view addSubview:self.imageView];    ​    ​    ​     ​    ​    ​4.初始化我們的segment, 在初始化segment的同時，我們通過便利初始化方法來指定有幾個按鍵和每個按鍵中的值。配置的時候我們可以通過tintColor來設定我們segment的顏色，通過Target-Action來註冊segment要回調的方法，同時指定回調的事件，我們設定的時UIControlEventValueChange,就是當segment的selectedSegmentIndex改變時,調用我們註冊的方法。代碼如下：   ​    ​ //添加segmentControlself.segment = [[UISegmentedControl alloc] initWithItems:@[@"Play", @"Pause"]];self.segment.frame = CGRectMake(110, 255, 100, 40);self.segment.tintColor = [UIColor whiteColor];//註冊回調方法，在segment的值改變的時候回調註冊的方法[self.segment addTarget:self action:@selector(tapSegment) forControlEvents:UIControlEventValueChanged];[self.view addSubview:self.segment];      ​    ​    ​5.下面的代碼是要初始化並配置我們的音頻播放器組件，配置的時候指定我們音頻所在路徑的url,並且回寫播放的錯誤碼如下  //配置播放器NSBundle *bundle = [NSBundle mainBundle];NSString * path = [bundle pathForResource:@"music" ofType:@"mp3"];NSURL *musicURL = [NSURL fileURLWithPath:path];NSError *error;self.player = [[AVAudioPlayer alloc] initWithContentsOfURL:musicURL error:&error];if (self.player == nil) {    NSLog(@"error = %@", [error localizedDescription]);}      ​    ​    ​6.設定定時器，並註冊我們要間隔調用的方法。下面的定時器是1秒中重複調用我們當前view中的time方法，在time方法中我們會擷取當前音訊當前播放時間，並在lable中顯示，稍後會提到    ​  //設定時間，每一秒鐘調用一次綁定的方法self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(time) userInfo:nil repeats:YES];    ​    ​    ​     ​    ​    ​7.添加我們的音量控制組件，並綁定當slider的值改變是調用哪一個方法。同時指定slider的最大值和最小值，代碼如下：  //添加sliderself.slider = [[UISlider alloc] initWithFrame:CGRectMake(100,300, 120 , 50)];[self.slider addTarget:self action:@selector(changeVo) forControlEvents:UIControlEventValueChanged]; [self.view addSubview:self.slider];//設定slider最小值和最大值self.slider.minimumValue = 1;self.slider.maximumValue = 10;      ​    ​3.組件初始化和配置完畢，接下來我們就得實現各控制項要回調的方法。     ​    ​    ​1.當slider的值改變是我們要調用的方法如下，就是要設定一下音頻播放器的聲音，代碼如下： 12345//改變聲音-(void)changeVo{    self.player.volume = self.slider.value;}    ​    ​    ​     ​    ​    ​2.定時器定時調用的方法如下，在此方法中我們要擷取音訊總時間和當前播放時間，並把秒轉換成分鐘（下面的代碼沒有使用NSDateFormat來轉換時間，讀者可以用自己的方法來轉換），轉換完以後在label中顯示目前時間和總時間，代碼如下  //更新時間-(void) time{    //擷取音訊總時間    NSTimeInterval totalTimer = self.player.duration;    //擷取音訊目前時間    NSTimeInterval currentTime = self.player.currentTime;    //根據時間比設定進度條的進度    self.progress.progress = (currentTime/totalTimer);         //把秒轉換成分鐘    NSTimeInterval currentM = currentTime/60;    currentTime = (int)currentTime%60;         NSTimeInterval totalM = totalTimer/60;    totalTimer = (int)totalTimer%60;         //把時間顯示在lable上    NSString *timeString = [NSString stringWithFormat:@"%02.0f:%02.0f|%02.0f:%02.0f",currentM, currentTime, totalM,totalTimer];    self.label.text = timeString;}    ​    ​    ​3.下面是segment要回調的方法根據segment的selectedSegmentIndex來設定播放器的播放還是停止，代碼如下：  //segment所回調的方法-(void) tapSegment{    int isOn = self.segment.selectedSegmentIndex;    if (isOn == 0)    {        [self.player play];             }    else    {        [self.player pause];    } }