簡(jiǎn)易音樂(lè)播放器(仿網(wǎng)易云音樂(lè))

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è)樣

整體效果.gif

UI設(shè)計(jì)確實(shí)很丑颗管。(叫程序員來(lái)做設(shè)計(jì)就是這個(gè)結(jié)果) 最上面的sliderView能夠調(diào)節(jié)播放器的音量;下面的UIProgressViewUILabel用來(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文件

QQ20160201-0@2x.png
#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):

封面動(dòng)畫(huà).gif

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地址上找到我哦。

END

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鸯檬,一起剝皮案震驚了整個(gè)濱河市决侈,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌喧务,老刑警劉巖赖歌,帶你破解...
    沈念sama閱讀 218,682評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件枉圃,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡庐冯,警方通過(guò)查閱死者的電腦和手機(jī)孽亲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)展父,“玉大人返劲,你說(shuō)我怎么就攤上這事∑苘裕” “怎么了篮绿?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,083評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)吕漂。 經(jīng)常有香客問(wèn)我亲配,道長(zhǎng),這世上最難降的妖魔是什么惶凝? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,763評(píng)論 1 295
  • 正文 為了忘掉前任吼虎,我火速辦了婚禮,結(jié)果婚禮上梨睁,老公的妹妹穿的比我還像新娘。我一直安慰自己娜饵,他們只是感情好坡贺,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著箱舞,像睡著了一般遍坟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上晴股,一...
    開(kāi)封第一講書(shū)人閱讀 51,624評(píng)論 1 305
  • 那天愿伴,我揣著相機(jī)與錄音,去河邊找鬼电湘。 笑死隔节,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的寂呛。 我是一名探鬼主播怎诫,決...
    沈念sama閱讀 40,358評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼贷痪!你這毒婦竟也來(lái)了幻妓?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,261評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤劫拢,失蹤者是張志新(化名)和其女友劉穎肉津,沒(méi)想到半個(gè)月后强胰,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡妹沙,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年偶洋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片初烘。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡涡真,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出肾筐,到底是詐尸還是另有隱情哆料,我是刑警寧澤,帶...
    沈念sama閱讀 35,737評(píng)論 5 346
  • 正文 年R本政府宣布吗铐,位于F島的核電站东亦,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏唬渗。R本人自食惡果不足惜典阵,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望镊逝。 院中可真熱鬧壮啊,春花似錦、人聲如沸撑蒜。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,941評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)座菠。三九已至狸眼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間浴滴,已是汗流浹背拓萌。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,057評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留升略,地道東北人微王。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3 371
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像品嚣,于是被迫代替她去往敵國(guó)和親骂远。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 原文鏈接http://www.cnblogs.com/kenshincui/p/4186022.html 音頻在i...
    Hyman0819閱讀 21,708評(píng)論 4 74
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果压固,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜,今天將帶大家一窺ios動(dòng)畫(huà)全貌靠闭。在這里你可以看...
    每天刷兩次牙閱讀 8,495評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果帐我,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜,今天將帶大家一窺iOS動(dòng)畫(huà)全貌愧膀。在這里你可以看...
    F麥子閱讀 5,113評(píng)論 5 13
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)拦键、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,105評(píng)論 4 62
  • 上周在荔枝微課聽(tīng)了若水老師講的關(guān)于手診的一節(jié)課檩淋,感覺(jué)好神奇芬为!一直有打算要參加手診培訓(xùn)班的學(xué)習(xí),這次在荔枝微課上聽(tīng)老...
    明天更健康閱讀 620評(píng)論 0 0