[IOS] —— 音乐播放器进度条的简单实现

利用定时器，UISlider以及它的响应事件简单实现进度条

效果图

实现的功能有：

1.进度条随着时间的变化自动改变位置
2.拖动进度条时，播放器自动播放到对应的点

代码实现

这个是slider的基本设置

@property (nonatomic, retain) UISlider *slider;
// 进度条
    self.slider = [[UISlider alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth - 100, 20)];
    self.slider.center = CGPointMake(kControlBarCenterX, kControlBarCenterY + 10);
    self.slider.minimumTrackTintColor = [UIColor blueColor];
    self.slider.minimumValue = 0.0;
    self.slider.maximumValue = 1.0;
    //将滑动条加入到控制器上
    [self.view addSubview:self.slider];

先介绍拖动滑块时播放器跟着播放到对应的点的方法

  //1.监听slider变化状态；（value值变化）（最主要的作用是：监听滑块的拖动）（与滑块自动滑不相关，因为value的值已经在定时器作用下会自动改变值）
    //1.1（UIControlEventValueChanged）这个事件的响应比价特殊，其实跟点击按钮效果一样，点击了就会响应，而这里是拖动进度条才会有响应
    [self.slider addTarget:self action:@selector(progressAction:) forControlEvents:UIControlEventValueChanged];

progressAction：方法的实现
#pragma mark - 手动拖动进度条的相应地变化
-(void)progressAction:(UISlider *)slider{
        //1.slider的value值发生变化时，currentTime也在发生变化（在playerAction中定义了value的公式）
        float current = slider.value;
        //2.获取最终的currentTime
        float nextCurrent = current * CMTimeGetSeconds(self.player.currentItem.duration);
        //3.拖动slider导致value的值改变时，player能够让正在进行的item追着时间走
        [self.player seekToTime:CMTimeMakeWithSeconds(nextCurrent, 1.0)];
        //6.使得计时器一直处于启动状态
        self.timer.fireDate =[NSDate distantPast];
}

这样就可以实现拖动滑块时播放器跟着播放到对应的点上

接着介绍一下滑块随着时间自动改变位置的方法

这里应用到的是定时器的方法

@property (nonatomic, retain) NSTimer *timer;
// 计时器 控制播放（slider的跟随时间的滑动）
    //使用定时器方法：每间隔一秒响应playerAction方法（因为进度条时间是按每秒变化的）
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(playerAction) userInfo:nil repeats:YES];
playerAction方法的实现
#pragma mark - 播放计时器方法
-(void)playerAction{
    //当前时间 / 总时间 赋值给slider.value.value改变，滑块会跟着滑动，self.player.currentItem.currentTime，self.player.currentItem.duration表示获取当前音频的播放时间和总时间，这时AVPlayer自带的
    self.slider.value = CMTimeGetSeconds(self.player.currentItem.currentTime) / CMTimeGetSeconds(self.player.currentItem.duration);
}

通过这样设置，滑块就会跟着时间自动改变到相应的位置