#30 Music Player 音樂播放器

基本版

作品截圖：

APP功能：

• 利用 AVPlayer 播放音樂。
• 包含播放鍵，暫停鍵，下一首，上一首。
• 隨機 button，點選將隨機播放一首歌。
• 調整音量。
• 使用 SF Symbols 的圖片。
• 顯示歌名、歌手及封面照片

心得：

上課 → 複習 → 練習 → 寫作業：是獲得新技能必經的步驟

最近彼得潘班的課程多了很多語法的部分，應接不暇的文組生小白如我，彷彿經歷了一場海嘯，醒來時身邊多了一些英文字母望著我，好像認得它們又好像不認得它們，忽然想起前幾天Peter說『期待你的新文章啊！』，語法消化不良的我，是不是該重拾在文組生的方式：上課 → 複習 → 練習 → 寫作業，默默忘了最後一樣，學習效果真的差好多😭。
現階段速度不快沒有關係，但要穩定的前進才是王道！！期許自己堅持下去。

這次的作業選了小孩最近常唱的及另外兩首歌，當作練習。期待學到更多技術，然後把進階版也完成。

進入正題 →

🌟 加入mp3檔案

直接把mp3檔案拉入 Xcode 左邊 project navigator 的資料夾裡

記得上面要打勾，讓它可以拷貝，最下方也要打勾，加入目標專案

🌟 播放音樂

1. 先要 import AVFoundation
2. 然後透過四個步驟就可以播放音樂：

//1.透過 Bundle.main 讀取程式本生的資料夾，找到音樂mp3檔的url路徑
let fileUrl = Bundle.main.url(forResource: songs[index], withExtension: "mp3")!
//2.利用 AVPlayerItem 生成要播放的音樂
let playerItem = AVPlayerItem(url: fileUrl)
//3.設定 player 要播放的 AVPlayerItem
player.replaceCurrentItem(with: playerItem)
//4.開始播放
player.play()

可以參考

利用 AVPlayer 播放音樂音效

🌟 設定 Button 跟著音樂播放或暫停而變化

這是讓我卡最久的部分！！🤯

在設定 Button 時，注意是新版還是舊版，因為作法不一樣，參考：

從程式設定 iOS UIKit Button 的文字，圖片 & 樣式

如果 Button Style 不是 Default 就是新版(iOS 15開始)，其餘是舊版。
本次作業是用新版

//button顯示暫停圖示
playPauseButton.configuration?.image = UIImage(systemName: "pause.fill")

🌟 練習用 enum rawValue 及 switch 對應歌手及歌曲

當歌曲已經用到 array，在輸入對應歌手時，看到一堆字串，開始聯想到enum，開始試著把歌手變成 enum 取代善變的字串。

var songs = ["崖上的波妞", "因為你 所以我", "The End of the World"]
    
enum Singers : String {
    case 青峰
    case 五月天
    case 戴維絲
}

說明：
當 enum 的 case 名稱跟 rawValue 一樣時，case 後的等號可以完全省略，僅留下最上面 enum 名稱冒號後的型別類型。

然後讓 switch 上場，比對歌曲要對應的歌手

//用switch讓歌手與歌曲對上
switch songs[index] {
case "崖上的波妞" :
    singerLabel.text = String(Singers.青峰.rawValue)
case "因為你 所以我":
    singerLabel.text = String(Singers.五月天.rawValue)
case "The End of the World":
    singerLabel.text = String(Singers.戴維絲.rawValue)
default:
    break
}

關於 enum 可參考

#28 初探 enum-Apple 的剪刀石頭布(RPS)範例

🌟 自訂新的View Controller型別

把原本 View Controller 刪除，用繼承 View Controller 自訂的新型別 Music Player View Controller 取代。

可參考：

新增 Cocoa Touch Class 的步驟說明

🌟 把播放的功能寫成 func

放在播放按鈕、上一首、下一首及隨機按鈕裡

fileprivate func playMusic() {
    //四個步驟播放音樂
    //1.透過 Bundle.main 讀取程式本生的資料夾，找到音樂mp3檔的url路徑
    let fileUrl = Bundle.main.url(forResource: songs[index], withExtension: "mp3")!
    //2.利用 AVPlayerItem 生成要播放的音樂
    let playerItem = AVPlayerItem(url: fileUrl)
    //3.設定 player 要播放的 AVPlayerItem
    player.replaceCurrentItem(with: playerItem)
    //4.開始播放
    player.play()
        
    //button顯示暫停圖示
    playPauseButton.configuration?.image = UIImage(systemName: "pause.fill")
    //顯示歌曲對應的圖示
    songPhotoImageView.image = UIImage(named: songs[index])
    //顯示歌曲名稱
    songLabel.text = String(songs[index])
    //用switch讓歌手與歌曲對上
    switch songs[index] {
    case "崖上的波妞" :
        singerLabel.text = String(Singers.青峰.rawValue)
    case "因為你 所以我":
        singerLabel.text = String(Singers.五月天.rawValue)
    case "The End of the World":
        singerLabel.text = String(Singers.戴維絲.rawValue)
    default:
        break
    }
}

Recording GIF：

還沒有上傳到youtube(也許後來補上)，有興趣可以下載GitHub

Upload GitHub：

GitHub - Ryan-CY/Music-Player-basic-

Reference：

#94 模仿 iOS 的 Music App 製作情歌點唱機(音樂播放器)

進階版 ：

#41 Music Player 音樂播放器