Music App Project 實作(1)

一直有個目標,要來做出能上架的音樂播放App

於是決定先從普遍音樂App中有的功能開始實作並記錄下來

這一篇為第一次實作裡面有的功能,也會再慢慢加上想要的其他功能以及賦予它好看的介面

這個App主要會用到AVQueuePlayer

初階功能包含:

  • 播放暫停
  • 上一首/下一首(播到底後會自動從頭播放)
  • 可移到想要的分秒數聽歌(也會同步顯示現在的分秒數&歌曲總長度)
  • 單曲循環播放
  • 收藏愛心

現階段的歌曲及歌詞及圖片都還只是以陣列帶自己設定的字串寫成的

由於這篇的內容我是先一次寫完才來做筆記,只能盡力說明看看這些功能了!請見諒~

播放暫停

實現出來的gif如下:

其中我是用.play()/.pause()去完成播放及暫停功能

要使用AVQueuePlayer()相關都要記得先import AVFoundation才能用喔!

let player = AVQueuePlayer()
player.play()

在點擊button時會產生以下Action

pauseflag用來判斷現在的狀態是播放或暫停

//執行播放或暫停按鈕
@IBAction func pausemusic(_ sender: UIButton) {
switch pauseflag {
case 0:
playButton.setImage(UIImage(systemName: "play.fill"), for: .normal)
player.pause()
pauseflag = 1
case 1:
playButton.setImage(UIImage(systemName: "pause.fill"), for: .normal)
player.play()
pauseflag = 0
default: break

}
}

上一首/下一首(播到底後會自動從頭播放)

實現出來的gif如下:

其中點選跳上一首或下一首的按鈕會執行以下程式:

除了讓播放及暫停按鈕需回到初始值外,我們讓song這個參數做+-1的動作,藉這個方法來知道現在是在第幾首歌

接著呼叫musicinfo() 這個function, 去進行播放的動作

就能完成切換上一首或下一首歌

在musicinfo()裡也有寫到用song這個參數跟music.count進行判斷,播到最後一首後App不會掛掉,會自動回到第一首繼續播放

而在第一首歌,我們又點選切換到前一首的按鈕時,也會自動跳到最後一首歌繼續播放,可以無限循環你的歌單不會停止~

可移到想要的分秒數聽歌(也會同步顯示現在的分秒數&歌曲總長度)

實現出來的gif如下:(用gif大家會聽不到聲音)

這個功能比前面的難多了,需要有監聽功能.addPeriodicTimeObserver,才能了解歌曲播放的過程,即時顯示現在的秒數以及去做調整

以及在播放完後我有加上.removeTimeObserver()解除監聽,才不會讓你的歌曲一直堆疊直到無法負荷而掛掉!

有需要請參考最後的github連結~

另外,如果想知道歌曲總長度的可以用以下方法得到:

其中format部分為把CMTimeGetSeconds所得到之秒數先轉為Int後做計算,讓秒數轉換為幾小時幾分幾秒的格式.

processSlider(也就是畫面中的UISlider).minimumValue/.maximumValue可以設定這條Slider的最大與最小值,.isContinuous則是設定true才能讓此Slider連續變化(不會等到手鬆開按鈕才變化)

單曲循環播放

實現出來的gif如下:(gif沒聲音,但可以透過顯示的歌曲名稱及圖片看出差別)

在單曲循環播放的部分,我是用一個按鈕表示,當按鈕為非填滿的狀態時,播完會自動跳到下一首

而當按下單曲循環按鈕後,該按鈕變成填滿狀態,該首歌曲會不斷循環播放,直到再次按下按鈕讓它回到非填滿狀態

注意!我這邊設定的是若在單曲循環播放狀態時,使用者切換歌曲 →按下一首/上一首按鈕,會讓單曲循環播放狀態結束,不會跳到其他首都還一直重複每一首的單曲播放~

收藏愛心

實現出來的gif如下:

不論在是否播歌狀態下,使用者都能點選愛心按鈕,收藏至個人喜愛清單行列中~個人收藏清單部分將之後接著實作…

以上是第一次實作所做出的功能,往後將接著持續實作,一定要做出完整又好看的Music App~上面很多地方描述的不夠清楚,有需要可以參考github

github連結附上,就歡迎一起討論囉:

https://github.com/oujill/MusicApp

--

--