1.前言
最近用在學(xué)ios的媒體播放搂橙,在學(xué)習(xí)之余想找一些項(xiàng)目進(jìn)行實(shí)踐。我們都知道網(wǎng)易云音樂(lè)是音樂(lè)軟件中的良心產(chǎn)品跋核,歌曲推薦功能更是深入人心冠跷,可以想象其背后的推薦算法和歌曲分類究竟有多么強(qiáng)大。用AVAudioPlayer寫(xiě)音樂(lè)播放器的時(shí)候厨诸,自然就想到了模仿網(wǎng)易云音樂(lè),雖然寫(xiě)得比較簡(jiǎn)單禾酱,但是在這里還是給大家分享一下微酬。
想直接看代碼略過(guò)文章的,點(diǎn)這里github地址颤陶。
播放器就長(zhǎng)下面這個(gè)樣
UI設(shè)計(jì)確實(shí)很丑颗管。(叫程序員來(lái)做設(shè)計(jì)就是這個(gè)結(jié)果) 最上面的sliderView
能夠調(diào)節(jié)播放器的音量;下面的UIProgressView
和UILabel
用來(lái)顯示播放器的進(jìn)度滓走;而下一曲和上一曲的按鈕只是為了裝飾中間的播放按鈕垦江。
這個(gè)音樂(lè)播放器主要分為三個(gè)部分
1.UI
2.AVAudioPlayer
3.旋轉(zhuǎn)動(dòng)畫(huà)
- 因?yàn)閁I并不是這篇文章的主要內(nèi)容,所以只介紹2和3部分搅方,UI部分我是直接通過(guò)(storyboard)來(lái)完成的比吭,并且只適合在4-inch的屏幕上運(yùn)行。(PS:在簡(jiǎn)書(shū)上怎樣實(shí)現(xiàn)頁(yè)內(nèi)跳轉(zhuǎn)姨涡?markdown中的jump語(yǔ)法好像在簡(jiǎn)書(shū)中并不是頁(yè)內(nèi)跳轉(zhuǎn)衩藤。)
- 我們已經(jīng)添加好了資源,如"music.mp3"和一些素材圖片涛漂。
2.AVAudioPlayer
AVAudioPlayer是AVFoundation.framework里面最基本的一個(gè)音頻播放器的類赏表。它只能播放一個(gè)指定路徑的音頻,特別地方在于它可以控制播放的次數(shù)匈仗,播放的時(shí)間瓢剿。它還有一個(gè)很強(qiáng)大的功能,就是可以很方便的調(diào)節(jié)左右聲道的音量悠轩,從而實(shí)現(xiàn)很酷的立體聲效果间狂。
首先,引入AVFoundation框架火架,然后初始化播放器前标,并加載本地的mp3文件
#import <AVFoundation/AVFoundation.h>
property (strong, nonatomic) AVAudioPlayer *player;
//獲取mp3文件的路徑
NSBundle *bundle = [NSBundle mainBundle];
NSString * path = [bundle pathForResource:@"music" ofType:@"mp3"];
NSURL *musicURL = [NSURL fileURLWithPath:path];
self.player = [[AVAudioPlayer alloc] initWithContentsOfURL:musicURL error:nil];
//設(shè)置初始的聲音值
self.player.volume = 2;
//設(shè)置代理
self.player.delegate = self;
這樣就創(chuàng)建了一個(gè)播放器坠韩,要控制播放器AVAudioPlayer中提供了三個(gè)方法,分別是:
- (BOOL)play; //開(kāi)始播放
- (void)pause; //暫停播放
- (void)stop; //停止播放
現(xiàn)在只需要一句[self.player play];
炼列,你的模擬器就應(yīng)該有聲音了只搁。
為了讓播放器更符合您的要求,下面列出了AVAudioPlayer的一些屬性
@property(readonly, getter=isPlaying) BOOL playing; //是否正在播放
@property(readonly) NSUInteger numberOfChannels; //聲道數(shù)
@property(readonly) NSTimeInterval duration; //播放的總時(shí)間
@property NSTimeInterval currentTime; //當(dāng)前播放時(shí)間
@property NSInteger numberOfLoops; //循環(huán)播放次數(shù)
@property float volume; //音量大小
3.旋轉(zhuǎn)動(dòng)畫(huà)
選擇我們的播放器已經(jīng)設(shè)置好了UI和播放器俭尖,剩下模仿網(wǎng)易云音樂(lè)的封面旋轉(zhuǎn)動(dòng)畫(huà)氢惋。
在動(dòng)畫(huà)方面我們簡(jiǎn)單地使用動(dòng)畫(huà)CABasicAnimation。
CABasicAnimation是layer層提供的基本單一的"keyframe"動(dòng)畫(huà)稽犁。我們可以使用
animationWithKeyPath:
方法來(lái)創(chuàng)建一個(gè)CABasicAnimation焰望,并且將keyPath存儲(chǔ)在渲染樹(shù)中。(類似于cell的Identifier)
代碼如下:
/// 封面圖片
@property (weak, nonatomic) IBOutlet UIImageView *coverImageView;
//創(chuàng)建一個(gè)繞z軸選擇的動(dòng)畫(huà)
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
//旋轉(zhuǎn)一周
animation.toValue = @(2*M_PI);
//循環(huán)次數(shù)已亥,盡量大
animation.repeatCount = MAXFLOAT;
//執(zhí)行一次動(dòng)畫(huà)需要的時(shí)間
animation.duration = 50.0f;
[self.coverImageView.layer addAnimation:animation forKey:@"rotationAnimation"];
- 需要注意的是熊赖,我們一給
self.coverImageView.layer
添加動(dòng)畫(huà),這個(gè)動(dòng)畫(huà)就馬上開(kāi)始執(zhí)行了虑椎。 - 至于封面圖片轉(zhuǎn)一圈的時(shí)間如何確定震鹉,我是看轉(zhuǎn)動(dòng)的速度來(lái)估計(jì)的,覺(jué)得50秒這個(gè)時(shí)間效果比較好捆姜。(如果有知道確切時(shí)間的朋友传趾,留言告訴我一下哈。ヽ(≧Д≦)ノ)
動(dòng)畫(huà)執(zhí)行的效果應(yīng)該是這樣的泥技,封面一直緩慢旋轉(zhuǎn):
4.其它一些代碼
更新播放進(jìn)度條浆兰,我們可以設(shè)置一個(gè)定時(shí)器,每一秒執(zhí)行一次下面的代碼:
/// 播放進(jìn)度
@property (weak, nonatomic) IBOutlet UIProgressView *progressView;
/// 播放進(jìn)度的文字Label
@property (weak, nonatomic) IBOutlet UILabel *progressLabel;
//獲取音頻的總時(shí)間
NSTimeInterval totalTimer = self.player.duration;
//獲取音頻的當(dāng)前時(shí)間
NSTimeInterval currentTime = self.player.currentTime;
//根據(jù)時(shí)間比設(shè)置進(jìn)度條的進(jìn)度
self.progressView.progress = (currentTime/totalTimer);
//把秒轉(zhuǎn)換成分鐘
//當(dāng)前時(shí)間的秒和分鐘
int currentM = currentTime/60;
int currentS = (int)currentTime%60;
//總時(shí)間的秒和分鐘
int totalM = totalTimer/60;
int totalS = (int)totalTimer%60;
//把時(shí)間顯示在lable上
NSString *timeString = [NSString stringWithFormat:@"%02d:%02d/%02d:%02d",currentM, currentS, totalM, totalS];
self.progressLabel.text = timeString;
暫停動(dòng)畫(huà)和繼續(xù)動(dòng)畫(huà)
- 暫停就是將layer的速度設(shè)置為0珊豹,將timeOffset設(shè)置為暫停時(shí)動(dòng)畫(huà)進(jìn)行的時(shí)間簸呈。
- 繼續(xù)動(dòng)畫(huà)就是將layer的速度設(shè)置為1,獲取暫停動(dòng)畫(huà)時(shí)設(shè)置的timeOffset和動(dòng)畫(huà)的運(yùn)行時(shí)間店茶,計(jì)算并設(shè)置動(dòng)畫(huà)的beginTime蝶棋。
- 暫停動(dòng)畫(huà)和繼續(xù)動(dòng)畫(huà)用于用戶點(diǎn)擊了暫停和開(kāi)始播放按鈕。
暫停動(dòng)畫(huà):
CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
layer.speed = 0.0;
layer.timeOffset = pausedTime;
繼續(xù)動(dòng)畫(huà):
CFTimeInterval pausedTime = [layer timeOffset];
layer.speed = 1.0;
layer.timeOffset = 0.0;
layer.beginTime = 0.0;
CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
layer.beginTime = timeSincePause;
5.最后再嘮叨幾句
這個(gè)播放器的內(nèi)容就只有這么多(當(dāng)然不只上面的代碼忽妒,還有一些細(xì)節(jié)玩裙,比如播放按鈕圖片的更換和播放結(jié)束后的處理等等),也有很多不完善的地方段直。如果有愿意一起改進(jìn)的朋友吃溅,歡迎在github地址上找到我哦。