iOS開發簡單的音頻播放器

jopen 9年前發布 | 17K 次閱讀 IOS iOS開發 移動開發

今天第一次接觸IOS開發的UI部分,之前學Objective-C的時候一直在模擬的使用Target-Action回調模式,今天算是真正的用 了一次。為了熟悉一下基本控件的使用方法,和UI部分的回調,下面開發了一個特別簡易的音頻播放器,來犒勞一下自己這一天的UI學習成果。在用到UI的控 件時如果很好的理解之前博客在Objective-C中的Target-Action回調模式,感覺控件的用法會很順手。下面的簡易播放器沒有用到多高深 的技術,只是一些基本控件和View的使用。

話不多說簡單的介紹一下今天的音頻播放器。在播放器中我們用到了UIProgressView(進度條)來顯示音頻的播放進度,用UILabel顯 示播放的當前時間和總時間。用UIImageView和UIImagel來加入圖片,用UISegmentedControl來控制播放和暫停,用滑動器 UISlider來控制音頻的音量。上面的執行組件都是UIKit中的組件,我們要定時的獲取音頻的播放時間,我們還要用到NSTimer來定時獲取 CurrentTime。播放器怎么能少的了關鍵的組件呢,我們還需要引入框架AVFoundation.framework。我們會用到組件 AVAudioPlayer來播放我們的音頻。

下面是簡易音頻播放器的截圖:

iOS開發簡單的音頻播放器

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)];
//加載圖片,我們的圖片名為background
UIImage *backImage = [UIImage imageNamed:@"background"];
//添加背景圖片到ImageView
self.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改變時,調用我們注冊的方法。代 碼如下:

//添加segmentControl
self.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的最大值和最小值,代碼如下:

//添加slider
self.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的值改變是我們要調用的方法如下,就是要設置一下音頻播放器的聲音,代碼如下:

//改變聲音
-(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];
    }

}

以上是整個簡易播放器的代碼,以為功能特別簡單所以代碼也不多。主要通過上面的簡易播放器來熟悉一下IOS開發中控件和view的使用流程,筆者也在一直學習,水平有限,歡迎批評指正。

來源:青玉伏案的博客

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!