开发者社区> 青玉伏案> 正文

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)];
//加载图片,我们的图片名为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);
     
    //把秒转换成分钟
    int currentM = currentTime/60;
    currentTime = (int)currentTime%60;
     
    int 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的使用流程,笔者也在一直学习,水平有限,欢迎批评指正。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
仿酷狗音乐播放器开发日志二十四 选项设置窗体的实现(附328行xml布局源码)
转载请说明原出处,谢谢~~        花了两天时间把仿酷狗的选项设置窗体做出来了,当然了只是做了外观。现在开学了,写代码的时间减少,所以整个仿酷狗的工程开发速度减慢了。
1007 0
iOS开发那些事-iOS应用本地化-资源文件本地化
<div> <p>资源文件包括:图片文件、音频文件以及前文提到的Localizable.strings等文件,它们的特点是都是随着应用一起打包发布。但就本地化而言无论是图片文件还是音频文件都必须实现的步骤都是类似的,因此我们重点介绍图片文件的本地化。</p> <p><span id="more-345"></span></p> <p>资源文件的本地化,也是需要准备好几个本地化版本的文件。图片需
1007 0
仿酷狗音乐播放器开发日志二十六 duilib在标题栏弹出菜单的方法
转载请说明原出处,谢谢~~        上篇日志说明了怎么让自定义控件响应右键消息。之后我给主窗体的标题栏增加右键响应,观察原酷狗后可以发现,在整个标题栏都是可以响应右键并弹出菜单的。
1045 0
仿酷狗音乐播放器开发日志十九——CTreeNodeUI的bug修复二(附源码)
转载请说明原出处,谢谢        今天本来打算把仿酷狗播放列表的子控件拖动插入功能做一下,但是仔细使用播放列表控件时发现了几个逻辑错误,由于我的播放 列表控件是基于CTreeViewUI和CTreeNodeUI做得,所以产生这几个bug的原因还在于他们两个,在《仿酷狗音乐播放器开发日志十一 ——CTreeNodeUI的bug修复》中已经修复过一个动态添加控件的相关bug,这属于第二次修复了。
1125 0
仿酷狗音乐播放器开发日志二十三 修复Option控件显示状态不全的bug(附源码)
转载请说明原出处,谢谢~~          整个仿酷狗工程的开发将近尾声,现在还差选项设置窗体的部分,显然在设置窗体里用的最多的就是OptionUI控件,我在写好大致的布局后去测试效果,发现Option控件的显示效果很不理想。
925 0
仿酷狗音乐播放器开发日志二十二 动态调色板控件第二版(性能大幅提升附源码)
转载请说明原出处,谢谢~~         在上次写的博客《仿酷狗音乐播放器开发日志二十一 开发动态调色板控件(附源码)》发布后,我在群里和网友讨论这个控件的性能和优 缺点,发现了他很多不足,还有很多提升空间,之后我简单的修改了代码提升了控件的响应速度。
905 0
仿酷狗音乐播放器开发日志二十一 开发动态调色板控件(附源码)
转载请说明原出处,谢谢~~           上一篇仿酷狗日志结束后,整个换肤功能就只剩下调色板功能没有做了,我本以为会很简单,但是研究了酷狗的调色板功能后发现不是那么简单的事情。
1103 0
+关注
青玉伏案
在技术的世界中,一直在路上~
135
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载