iOS開發拓展篇—音頻處理（音樂播放器1）

時間 2019-11-11

標籤 ios 開發拓展音頻處理音樂播放欄目 iOS 简体版

原文原文鏈接

iOS開發拓展篇—音頻處理（音樂播放器1）app

說明：該系列文章經過實現一個簡單的音樂播放器來介紹音頻處理的相關知識點，須要重點注意不少細節的處理。框架

1、調整項目的結構，導入必要的素材

　　調整後的項目結構以下：

2、新建兩個控制器

（1）新建一個控制器，用於展現音樂文件列表界面，其繼承自UITableViewController

（2）新建一個控制器，用於展現播放界面，其繼承自UIViewController

（3）在storyboard中，把以前的控制器刪除，換上一個導航控制器，設置tableViewController與以前新建的控制器類進行關聯

3、音樂文件列表控制器中基本界面的搭建

（1）新建一個音樂文件的模型

根據plist文件創建模型：

音樂模型的代碼以下：

YYMusicModel.h文件atom

 1 //
 2 //  YYMusicModel.h
 3 //  20-音頻處理（音樂播放器1）
 4 //
 5 //  Created by apple on 14-8-13.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 
11 @interface YYMusicModel : NSObject
12 /**
13  *  歌曲名字
14  */
15 @property (copy, nonatomic) NSString *name;
16 /**
17  *  歌曲大圖
18  */
19 @property (copy, nonatomic) NSString *icon;
20 /**
21  *  歌曲的文件名
22  */
23 @property (copy, nonatomic) NSString *filename;
24 /**
25  *  歌詞的文件名
26  */
27 @property (copy, nonatomic) NSString *lrcname;
28 /**
29  *  歌手
30  */
31 @property (copy, nonatomic) NSString *singer;
32 /**
33  *  歌手圖標
34  */
35 @property (copy, nonatomic) NSString *singerIcon;
36 @end

（2）使用字典轉模型的第三方框架

部分相關代碼以下：

此時的界面顯示效果爲：

（3）添加一個UIimageView的分類，調整歌手的頭像（正方形——>圓形）

　　分類的實現代碼以下：

　　UIImage+YY.h文件

1 #import <UIKit/UIKit.h>
2 
3 @interface UIImage (YY)
4 + (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor;
5 @end

　　UIImage+YY.m文件spa

 1 #import "UIImage+YY.h"
 2 #import <objc/message.h>
 3 
 4 @implementation UIImage (YY)
 5 + (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor
 6 {
 7     // 1.加載原圖
 8     UIImage *oldImage = [UIImage imageNamed:name];
 9     
10     // 2.開啓上下文
11     CGFloat imageW = oldImage.size.width + 2 * borderWidth;
12     CGFloat imageH = oldImage.size.height + 2 * borderWidth;
13     CGSize imageSize = CGSizeMake(imageW, imageH);
14     UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);
15     
16     // 3.取得當前的上下文
17     CGContextRef ctx = UIGraphicsGetCurrentContext();
18     
19     // 4.畫邊框(大圓)
20     [borderColor set];
21     CGFloat bigRadius = imageW * 0.5; // 大圓半徑
22     CGFloat centerX = bigRadius; // 圓心
23     CGFloat centerY = bigRadius;
24     CGContextAddArc(ctx, centerX, centerY, bigRadius, 0, M_PI * 2, 0);
25     CGContextFillPath(ctx); // 畫圓
26     
27     // 5.小圓
28     CGFloat smallRadius = bigRadius - borderWidth;
29     CGContextAddArc(ctx, centerX, centerY, smallRadius, 0, M_PI * 2, 0);
30     // 裁剪(後面畫的東西纔會受裁剪的影響)
31     CGContextClip(ctx);
32     
33     // 6.畫圖
34     [oldImage drawInRect:CGRectMake(borderWidth, borderWidth, oldImage.size.width, oldImage.size.height)];
35     
36     // 7.取圖
37     UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
38     
39     // 8.結束上下文
40     UIGraphicsEndImageContext();
41     
42     return newImage;
43 }
44 @end

　　分類的使用：

　　實現的效果：

（4）推薦使用一個第三方框架，用來處理顏色

　　涉及的代碼：

4、實現代碼

　　YYMusicsViewController.m文件

 1 //
 2 //  YYMusicsViewController.m
 3 //  20-音頻處理（音樂播放器1）
 4 //
 5 //  Created by apple on 14-8-13.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 8 
 9 #import "YYMusicsViewController.h"
10 #import "YYMusicModel.h"
11 #import "MJExtension.h"
12 #import "UIImage+YY.h"
13 #import "Colours.h"
14 
15 @interface YYMusicsViewController ()
16 @property(nonatomic,strong)NSArray *musics;
17 @end
18 
19 @implementation YYMusicsViewController
20 #pragma mark-懶加載
21 -(NSArray *)musics
22 {
23     if (_musics==nil) {
24         _musics=[YYMusicModel objectArrayWithFilename:@"Musics.plist"];
25     }
26     return _musics;
27 }
28 
29 
30 - (void)viewDidLoad
31 {
32     [super viewDidLoad];
33     
34 }
35 
36 #pragma mark - Table view data source
37 /**
38  *一共多少組
39  */
40 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
41 {
42     return 1;
43 }
44 /**
45  *每組多少行
46  */
47 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
48 {
49     return self.musics.count;
50 }
51 /**
52  *每組每行的cell
53  */
54 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
55 {
56     static NSString *ID=@"ID";
57     UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
58     if (cell==nil) {
59         cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
60     }
61     //取出數據模型
62     YYMusicModel *model=self.musics[indexPath.row];
63     cell.textLabel.text=model.name;
64     cell.detailTextLabel.text=model.singer;
65     cell.imageView.image=[UIImage circleImageWithName:model.singerIcon borderWidth:1 borderColor:[UIColor skyBlueColor]];
66     return cell;
67 }
68 /**
69  *  設置每一個cell的高度
70  */
71 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
72 {
73     return 70;
74 }
75 
76 /**
77  *  cell的點擊事件
78  */
79 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
80 {
81     //取消選中被點擊的這行
82     [tableView deselectRowAtIndexPath:indexPath animated:YES];
83     
84 }
85 @end

5、改進

　　對tableViewcell的代碼進行封裝：

實現：新建一個YYmusicCell類，繼承自UITableViewCell。

封裝代碼以下：

YYMusicCell.h文件

 1 //
 2 //  YYMusicCell.h
 3 //  20-音頻處理（音樂播放器1）
 4 //
 5 //  Created by apple on 14-8-13.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 @class YYMusicModel;
11 @interface YYMusicCell : UITableViewCell
12 +(instancetype)cellWithTableView:(UITableView *)tableView;
13 @property(nonatomic,strong)YYMusicModel *music;
14 @end

YYMusicCell.m文件3d

 1 //
 2 //  YYMusicCell.m
 3 //  20-音頻處理（音樂播放器1）
 4 //
 5 //  Created by apple on 14-8-13.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 8 
 9 #import "YYMusicCell.h"
10 #import "YYMusicModel.h"
11 #import "Colours.h"
12 #import "UIImage+YY.h"
13 
14 @implementation YYMusicCell
15 //返回一個cell
16 +(instancetype)cellWithTableView:(UITableView *)tableView
17 {
18     static NSString *ID=@"ID";
19     YYMusicCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
20     if (cell==nil) {
21         cell=[[YYMusicCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
22     }
23     return cell;
24 }
25 
26 -(void)setMusic:(YYMusicModel *)music
27 {
28     _music=music;
29     self.textLabel.text=music.name;
30     self.detailTextLabel.text=music.singer;
31     self.imageView.image=[UIImage circleImageWithName:music.singerIcon borderWidth:1 borderColor:[UIColor skyBlueColor]];
32 }
33 @end

YYMusicsViewController.m文件code

 1 //
 2 //  YYMusicsViewController.m
 3 //  20-音頻處理（音樂播放器1）
 4 //
 5 //  Created by apple on 14-8-13.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 8 
 9 #import "YYMusicsViewController.h"
10 #import "YYMusicModel.h"
11 #import "MJExtension.h"
12 #import "YYMusicCell.h"
13 
14 @interface YYMusicsViewController ()
15 @property(nonatomic,strong)NSArray *musics;
16 @end
17 
18 @implementation YYMusicsViewController
19 #pragma mark-懶加載
20 -(NSArray *)musics
21 {
22     if (_musics==nil) {
23         _musics=[YYMusicModel objectArrayWithFilename:@"Musics.plist"];
24     }
25     return _musics;
26 }
27 
28 - (void)viewDidLoad
29 {
30     [super viewDidLoad];
31 }
32 
33 #pragma mark - Table view data source
34 /**
35  *一共多少組
36  */
37 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
38 {
39     return 1;
40 }
41 /**
42  *每組多少行
43  */
44 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
45 {
46     return self.musics.count;
47 }
48 /**
49  *每組每行的cell
50  */
51 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
52 {
53     YYMusicCell *cell=[YYMusicCell cellWithTableView:tableView]; 54     cell.music=self.musics[indexPath.row]; 55     return cell; 56 }
57 /**
58  *  設置每一個cell的高度
59  */
60 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
61 {
62     return 70;
63 }
64 
65 /**
66  *  cell的點擊事件
67  */
68 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
69 {
70     //取消選中被點擊的這行
71     [tableView deselectRowAtIndexPath:indexPath animated:YES];
72     
73 }
74 @end