音樂播放APP — 致敬Avicii

閱讀時間約 4 分鐘

目的:

  1. 在 viewDidLoad 裡寫程式。

2. 利用 AVPlayer 播放音樂。

3. 包含播放鍵,暫停鍵,下一首,上一首。

4. 使用 IBOutlet 和 IBAction 實現 App 的功能。

5. 畫面上至少需包含以下元件,而且程式也有使用這些元件。

text field,slider,switch,label,image view,button,segmented control。

6. slider 滑動時要搭配 label 顯示數值。

7. 有亂數功能。

raw-image

這次這個APP花了三天左右才理解需要用到的功能,而學到的東西真的滿多的,就講一下吧~

raw-image
  1. lazy的使用:

lazy是可以幫助我們在建立一些變數時,若變數的建立需要花一些時間,就可以加上它,當需要時,程式才會建立此變數,通常遇到下面的問題時可以用到。

raw-image

https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E8%AE%93%E5%B1%AC%E6%80%A7%E8%AE%8A%E6%87%B6%E7%9A%84-swift-lazy-%E5%92%92%E8%AA%9E-cfcc16840bd2

2. observer的function使用:

當我們是希望在APP執行的過程中,讓程式可以根據使用過程中的變化而去做出改變就能用這個function去設定。這次用到的是在週期時間內去觀察然後做變化的function。

比較需要注意的是

forInterval:在多少時間範圍內觀察一次。

using: 當所設定的變化目標發生時,執行的程式內容。

raw-image

3. AVPlayer的相關內容:

let player = AVPlayer() :創造ㄧ個管理播放媒體的實例。

let SOSurl = Bundle.main.url(forResource: “Avicii — SOS (Fan Memories Video) ft. Aloe Blacc”, withExtension: “mp4”)!:將要播放的音樂放進磁碟中目錄的形式。

lazy var playItem = AVPlayerItem(url: SOSurl):使我們的檔案轉換成AVPlayer可播放的形式。

player.replaceCurrentItem(with: tracks[0]):替換目前正在播放的音樂。

player.seek(to: time):利用 CMTime 控制歌曲播放的區段,讓time去決定要從什麼時候開始播放。

player.play():播放音樂。

參考文件:

https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E5%88%A9%E7%94%A8-viewdidload-%E9%BB%9E%E4%B8%80%E9%A6%96%E6%AD%8C-%E6%92%AD%E6%94%BE%E4%B8%80%E6%AC%A1pl-bfe59e9e22c

4. IBAction的使用:可以設想成,當使用者點擊按鈕時,會執行以下動作。

raw-image

5. 背景播放音樂:

從+Capability加入background Modes。

raw-image

心得: 這次做到後來,發現應該有很多建立的變數,是可以整理分析在一起,用array或者class的方式去分類,讓程式可以更簡潔有效率,這部分之後還會多做琢磨。

Github:

https://github.com/deblive0917/music-player

參考文章:

https://jjeremy-xue.medium.com/swift-%E5%81%9A%E5%80%8B%E6%92%AD%E6%94%BE%E5%99%A8%E5%90%A7-%E5%8A%9F%E8%83%BD%E7%AF%87-bff6587d0f2f

模仿 iOS 的 Music App 製作周興哲Eric專屬播放電台(包含進階功能)
苦不堪言medium.com

    dab戴伯
    dab戴伯
    留言0
    查看全部
    發表第一個留言支持創作者!
    從 Google News 追蹤更多 vocus 的最新精選內容