实现效果:
一、半透明滑块的设置
复制代码
1 /**
2 *拖动滑块
3 /
4 - (IBAction)panSlider:(UIPanGestureRecognizer )sender {
5
6 //1.获得挪动的距离
7 CGPoint t=[sender translationInView:sender.view];
8 //把挪动清零
9 [sender setTranslation:CGPointZero inView:sender.view];
10
11 //2.控制滑块和进度条的frame
12 CGFloat sliderMaxX=self.view.width-self.slider.width;
13 self.slider.x+=t.x;
14 //控制滑块的frame,不让其越界
15 if(self.slider.x<0)
16 {
17 self.slider.x=0;
18 }else if (self.slider.x>sliderMaxX)
19 {
20 self.slider.x=sliderMaxX;
21 }
22 //设置进度条的宽度
23 self.progressView.width=self.slider.center.x;
24
25 //3.设置时间值
26 double progress=self.slider.x/sliderMaxX;
27 //当前的时间值=音乐的时长当前的进度值
28 NSTimeInterval time=self.player.durationprogress;
29 [self.slider setTitle:[self strWithTime:time] forState:UIControlStateNormal];
30
31 //设置拖拽进度的X的值
32 self.currentTimeView.x=self.slider.x;
33 [self.currentTimeView setTitle:self.slider.currentTitle forState:UIControlStateNormal];
34
35 //4.如果开始拖动,那么就停止定时器
36 if (sender.state==UIGestureRecognizerStateBegan) {
37 //停止定时器
38 [self removeCurrentTime];
39
40 //设置拖拽进度
41 //显示
42 self.currentTimeView.hidden=NO;
43 self.currentTimeView.y=self.currentTimeView.superview.height-5-self.currentTimeView.height;
44
45 }else if(sender.state==UIGestureRecognizerStateEnded)
46 {
47 //隐藏
48 self.currentTimeView.hidden=YES;
49 //设置播放器播放的时间
50 self.player.currentTime=time;
51 #warning 如果正在播放,才需要添加定时器
52 // if (self.player.isPlaying) {
53 //开启定时器
54 [self addCurrentTimeTimer];
55 // }
56 }
57 }
复制代码
裁剪圆角的细节处理:
二、播放或暂停、上一首、下一首的实现
复制代码
1 //上一首
2 - (IBAction)previous {
3 //1.在开始播放之前,禁用一切的app点击事件
4 UIWindow *window=[[UIApplication sharedApplication].windows lastObject];
5 window.userInteractionEnabled=NO;
6
7 //2.重置当前歌曲
8 [self resetPlayingMusic];
9
10 //3.获得上一首歌曲
11 [YYMusicTool setPlayingMusic:[YYMusicTool previousMusic]];
12
13 //4.播放上一首歌曲
14 [self starPlayingMusic];
15
16 //5.回复window的点击为可用
17 window.userInteractionEnabled=YES;
18 }
19 //下一首
20 - (IBAction)next {
21 //1.在开始播放之前,禁用一切的app点击事件
22 UIWindow *window=[[UIApplication sharedApplication].windows lastObject];
23 window.userInteractionEnabled=NO;
24
25 //2.重置当前歌曲
26 [self resetPlayingMusic];
27
28 //3.获得下一首歌曲
29 [YYMusicTool setPlayingMusic:[YYMusicTool nextMusic]];
30
31 //4.播放下一首歌曲
32 [self starPlayingMusic];
33
34 //5.回复window的点击为可用
35 window.userInteractionEnabled=YES;
36 }
37
38 //继续或暂停播放
39 - (IBAction)playOrPause {
40 if (self.playOrPauseButton.isSelected) {//暂停
41 self.playOrPauseButton.selected=NO;
42 //暂停播放
43 [YYAudioTool pauseMusic:self.playingMusic.filename];
44 //停掉定时器
45 [self removeCurrentTime];
46 }else
47 {
48 self.playOrPauseButton.selected=YES;
49 //继续播放
50 [YYAudioTool playMusic:self.playingMusic.filename];
51 //开启定时器
52 [self addCurrentTimeTimer];
53 }
54 }
复制代码
说明:播放和暂停按钮的图片设置在两种状态下并不一样,设置播放按钮的状态
三、对存在的bug进行改进
拖拽还存在问题(定时器的问题)
更好的方法时在添加定时器的地方进行更细的控制:
复制代码
1 /**
2 * 添加一个定时器
3 */
4 -(void)addCurrentTimeTimer
5 {
6 //如果当前没有在播放,那么就直接返回
7 if (self.player.isPlaying==NO) return;
8
9 //在添加一个定时器之前,先把以前的定时器移除
10 [self removeCurrentTime];
11
12 //提前先调用一次进度更新,以保证定时器的工作时及时的
13 [self updateCurrentTime];
14
15 //创建一个定时器,每一秒钟调用一次
16 self.CurrentTimeTimer=[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(updateCurrentTime) userInfo:nil repeats:YES];
17 //把定时器加入到运行时中
18 [[NSRunLoop mainRunLoop]addTimer:self.CurrentTimeTimer forMode:NSRunLoopCommonModes];
19 }
复制代码
四、补充
完整的代码如下:
复制代码
1 //
2 // YYPlayingViewController.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 "YYPlayingViewController.h"
10 #import "YYMusicTool.h"
11 #import "YYMusicModel.h"
12 #import "YYAudioTool.h"
13
14 @interface YYPlayingViewController ()
15 //显示拖拽进度
16 @property (weak, nonatomic) IBOutlet UIButton *currentTimeView;
17 //进度条
18 @property (weak, nonatomic) IBOutlet UIView *progressView;
19 //滑块
20 @property (weak, nonatomic) IBOutlet UIButton *slider;
21 @property (weak, nonatomic) IBOutlet UIImageView *iconView;
22 @property (weak, nonatomic) IBOutlet UILabel *songLabel;
23 @property (weak, nonatomic) IBOutlet UILabel *singerLabel;
24 //当前播放的音乐的时长
25 @property (weak, nonatomic) IBOutlet UILabel *durationLabel;
26 //正在播放的音乐
27 @property(nonatomic,strong)YYMusicModel *playingMusic;
28 //音乐播放器对象
29 @property(nonatomic,strong)AVAudioPlayer *player;
30 //定时器
31 @property(nonatomic,strong)NSTimer *CurrentTimeTimer;
32 - (IBAction)exit;
33 - (IBAction)tapProgressBg:(UITapGestureRecognizer *)sender;
34 - (IBAction)panSlider:(UIPanGestureRecognizer )sender;
35 - (IBAction)previous;
36 - (IBAction)playOrPause;
37 - (IBAction)next;
38 @property (weak, nonatomic) IBOutlet UIButton playOrPauseButton;
39
40 @end
41
42 @implementation YYPlayingViewController
43
44 -(void)viewDidLoad
45 {
46 [super viewDidLoad];
47
48 //裁剪圆角
49 self.currentTimeView.layer.cornerRadius=8;
50
51 }
52 #pragma mark-公共方法
53 -(void)show
54 {
55 //1.禁用整个app的点击事件
56 UIWindow window=[UIApplication sharedApplication].keyWindow;
57 window.userInteractionEnabled=NO;
58
59 //2.添加播放界面
60 //设置View的大小为覆盖整个窗口
61 self.view.frame=window.bounds;
62 //设置view显示
63 self.view.hidden=NO;
64 //把View添加到窗口上
65 [window addSubview:self.view];
66
67 //3.检测是否换了歌曲
68 if (self.playingMusic!=[YYMusicTool playingMusic]) {
69 [self resetPlayingMusic];
70 }
71
72 //4.使用动画让View显示
73 self.view.y=self.view.height;
74 [UIView animateWithDuration:0.25 animations:^{
75 self.view.y=0;
76 } completion:^(BOOL finished) {
77
78 //设置音乐数据
79 [self starPlayingMusic];
80 window.userInteractionEnabled=YES;
81 }];
82 }
83
84
85 #pragma mark-私有方法
86 //重置正在播放的音乐
87 -(void)resetPlayingMusic
88 {
89 //1.重置界面数据
90 self.iconView.image=[UIImage imageNamed:@"play_cover_pic_bg"];
91 self.songLabel.text=nil;
92 self.singerLabel.text=nil;
93
94 //2.停止播放
95 [YYAudioTool stopMusic:self.playingMusic.filename];
96 //把播放器进行清空
97 self.player=nil;
98
99 //3.停止定时器
100 [self removeCurrentTime];
101
102 //4.设置音乐播放按钮的状态
103 self.playOrPauseButton.selected=NO;
104 }
105 //开始播放音乐数据
106 -(void)starPlayingMusic
107 {
108 //1.设置界面数据
109
110 //如果当前播放的音乐就是传入的音乐,那么就直接返回
111 if (self.playingMusic==[YYMusicTool playingMusic])
112 {
113 //把定时器加进去
114 [self addCurrentTimeTimer];
115 return;
116 }
117 //存取音乐
118 self.playingMusic=[YYMusicTool playingMusic];
119 self.iconView.image=[UIImage imageNamed:self.playingMusic.icon];
120 self.songLabel.text=self.playingMusic.name;
121 self.singerLabel.text=self.playingMusic.singer;
122
123 //2.开始播放
124 self.player = [YYAudioTool playMusic:self.playingMusic.filename];
125
126 //3.设置时长
127 //self.player.duration; 播放器正在播放的音乐文件的时间长度
128 self.durationLabel.text=[self strWithTime:self.player.duration];
129
130 //4.添加定时器
131 [self addCurrentTimeTimer];
132
133 //5.设置音乐播放按钮的状态
134 self.playOrPauseButton.selected=YES;
135 }
136
137 /
138 把时间长度-->时间字符串
139 /
140 -(NSString )strWithTime:(NSTimeInterval)time
141 {
142 int minute=time / 60;
143 int second=(int)time % 60;
144 return [NSString stringWithFormat:@"%d:%d",minute,second];
145 }
146
147 #pragma mark-定时器控制
148 /
149 * 添加一个定时器
150 /
151 -(void)addCurrentTimeTimer
152 {
153 //如果当前没有在播放,那么就直接返回
154 if (self.player.isPlaying==NO) return;
155
156 //在添加一个定时器之前,先把以前的定时器移除
157 [self removeCurrentTime];
158
159 //提前先调用一次进度更新,以保证定时器的工作时及时的
160 [self updateCurrentTime];
161
162 //创建一个定时器,每一秒钟调用一次
163 self.CurrentTimeTimer=[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(updateCurrentTime) userInfo:nil repeats:YES];
164 //把定时器加入到运行时中
165 [[NSRunLoop mainRunLoop]addTimer:self.CurrentTimeTimer forMode:NSRunLoopCommonModes];
166 }
167 /
168 移除一个定时器
169 /
170 -(void)removeCurrentTime
171 {
172 [self.CurrentTimeTimer invalidate];
173
174 //把定时器清空
175 self.CurrentTimeTimer=nil;
176 }
177
178 /
179 * 更新播放进度
180 /
181 -(void)updateCurrentTime
182 {
183 //1.计算进度值
184 double progress=self.player.currentTime/self.player.duration;
185
186 //2.计算滑块的x值
187 // 滑块的最大的x值
188 CGFloat sliderMaxX=self.view.width-self.slider.width;
189 self.slider.x=sliderMaxXprogress;
190 //设置滑块上的当前播放时间
191 [self.slider setTitle:[self strWithTime:self.player.currentTime] forState:UIControlStateNormal];
192
193 //3.设置进度条的宽度
194 self.progressView.width=self.slider.center.x;
195
196 }
197
198 #pragma mark-内部的按钮监听方法
199 //返回按钮
200 - (IBAction)exit {
201
202 //0.移除定时器
203 [self removeCurrentTime];
204 //1.禁用整个app的点击事件
205 UIWindow window=[UIApplication sharedApplication].keyWindow;
206 window.userInteractionEnabled=NO;
207
208 //2.动画隐藏View
209 [UIView animateWithDuration:0.25 animations:^{
210 self.view.y=window.height;
211 } completion:^(BOOL finished) {
212 window.userInteractionEnabled=YES;
213 //设置view隐藏能够节省一些性能
214 self.view.hidden=YES;
215 }];
216 }
217
218 /
219 点击了进度条
220 /
221 - (IBAction)tapProgressBg:(UITapGestureRecognizer )sender {
222 //获取当前单击的点
223 CGPoint point=[sender locationInView:sender.view];
224 //切换歌曲的当前播放时间
225 self.player.currentTime=(point.x/sender.view.width)self.player.duration;
226 //更新播放进度
227 [self updateCurrentTime];
228 }
229 /
230 *拖动滑块
231 /
232 - (IBAction)panSlider:(UIPanGestureRecognizer )sender {
233
234 //1.获得挪动的距离
235 CGPoint t=[sender translationInView:sender.view];
236 //把挪动清零
237 [sender setTranslation:CGPointZero inView:sender.view];
238
239 //2.控制滑块和进度条的frame
240 CGFloat sliderMaxX=self.view.width-self.slider.width;
241 self.slider.x+=t.x;
242 //控制滑块的frame,不让其越界
243 if(self.slider.x<0)
244 {
245 self.slider.x=0;
246 }else if (self.slider.x>sliderMaxX)
247 {
248 self.slider.x=sliderMaxX;
249 }
250 //设置进度条的宽度
251 self.progressView.width=self.slider.center.x;
252
253 //3.设置时间值
254 double progress=self.slider.x/sliderMaxX;
255 //当前的时间值=音乐的时长当前的进度值
256 NSTimeInterval time=self.player.durationprogress;
257 [self.slider setTitle:[self strWithTime:time] forState:UIControlStateNormal];
258
259 //设置拖拽进度的X的值
260 self.currentTimeView.x=self.slider.x;
261 [self.currentTimeView setTitle:self.slider.currentTitle forState:UIControlStateNormal];
262
263 //4.如果开始拖动,那么就停止定时器
264 if (sender.state==UIGestureRecognizerStateBegan) {
265 //停止定时器
266 [self removeCurrentTime];
267
268 //设置拖拽进度
269 //显示
270 self.currentTimeView.hidden=NO;
271 self.currentTimeView.y=self.currentTimeView.superview.height-5-self.currentTimeView.height;
272
273 }else if(sender.state==UIGestureRecognizerStateEnded)
274 {
275 //隐藏
276 self.currentTimeView.hidden=YES;
277 //设置播放器播放的时间
278 self.player.currentTime=time;
279 #warning 如果正在播放,才需要添加定时器
280 // if (self.player.isPlaying) {
281 //开启定时器
282 [self addCurrentTimeTimer];
283 // }
284 }
285 }
286
287 //上一首
288 - (IBAction)previous {
289 //1.在开始播放之前,禁用一切的app点击事件
290 UIWindow *window=[[UIApplication sharedApplication].windows lastObject];
291 window.userInteractionEnabled=NO;
292
293 //2.重置当前歌曲
294 [self resetPlayingMusic];
295
296 //3.获得上一首歌曲
297 [YYMusicTool setPlayingMusic:[YYMusicTool previousMusic]];
298
299 //4.播放上一首歌曲
300 [self starPlayingMusic];
301
302 //5.回复window的点击为可用
303 window.userInteractionEnabled=YES;
304 }
305 //下一首
306 - (IBAction)next {
307 //1.在开始播放之前,禁用一切的app点击事件
308 UIWindow *window=[[UIApplication sharedApplication].windows lastObject];
309 window.userInteractionEnabled=NO;
310
311 //2.重置当前歌曲
312 [self resetPlayingMusic];
313
314 //3.获得下一首歌曲
315 [YYMusicTool setPlayingMusic:[YYMusicTool nextMusic]];
316
317 //4.播放下一首歌曲
318 [self starPlayingMusic];
319
320 //5.回复window的点击为可用
321 window.userInteractionEnabled=YES;
322 }
323 //继续或暂停播放
324 - (IBAction)playOrPause {
325 if (self.playOrPauseButton.isSelected) {//暂停
326 self.playOrPauseButton.selected=NO;
327 //暂停播放
328 [YYAudioTool pauseMusic:self.playingMusic.filename];
329 //停掉定时器
330 [self removeCurrentTime];
331 }else
332 {
333 self.playOrPauseButton.selected=YES;
334 //继续播放
335 [YYAudioTool playMusic:self.playingMusic.filename];
336 //开启定时器
337 [self addCurrentTimeTimer];
338 }
339 }
340
341
342 @end
复制代码