30 Music Player 簡易音樂播放-抖音熱門曲

這次本來想要直接挑戰到進階，但試的過程發現進階功能太挑戰我了QQ拖了很久…先把基礎的做好吧！

期待之後把這個播放器升級到進階版，這次刻畫面也刻的很開心。

簡易版內容：

1. 利用 AVPlayer 播放音樂。

2. 包含播放鍵，暫停鍵，下一首，上一首。

3. 隨機 button，點選將隨機播放一首歌。

4. 調整音量（音量調整原隱藏）

畫面：

畫面：

簡易音樂播放器APP

許願：未來進階版

5. 進階功能-播完一首歌後，自動播放下一首歌。

6. 進階功能-可滑動調整 & 顯示歌曲播放的時間

7. 進階功能-背景播放音樂

8. 進階功能-隨機播放，重覆播放多首歌，單曲循環

9. 進階功能-背景控制音樂

10. 進階功能-隨著歌曲演唱動態顯示歌詞

操作說明：

一、首頁

非常簡單，做了一個假畫面，點按鈕show下一頁。

二、下一頁我利用struct進行資料建構。

(一)、建立元件outlet

import UIKit
//載入AVFoundation函式庫(framework)
import AVFoundation

class musicViewController: UIViewController {
    
    
    //設定漸層的outlet
    @IBOutlet weak var backgroundView: UIImageView!
    //設定陰影的outlet
    @IBOutlet weak var shadowView: UIView!
    //設定專輯封面outlet
    @IBOutlet weak var musicImage: UIImageView!
    //設定歌名outlet Label
    @IBOutlet weak var musicName: UILabel!
    //設定歌手Label outlet
    @IBOutlet weak var singerLabel: UILabel!
    //設定音樂播放進度的slider
    @IBOutlet weak var musicSlider: UISlider!
    //拉音量調整的Slider
    @IBOutlet weak var volumeSlider: UISlider!
    //設定播放and暫停的按鈕outlet
    @IBOutlet weak var playAndPause: UIButton!

    //設定漸層的layer屬性
    let background = CAGradientLayer()
    //設定自定義紫色色碼
    let purple = UIColor(red: 143/255, green: 128/255, blue: 255/255, alpha: 1)
    //設定index起始值
    var index = 0
    
    //設定歌名型別
    var MusicInformations = [MusicData123]()
    let MusicInformation1 = MusicData123(songName: "golden_hour", SongNameLabel: "Golden Hour", Singer: "JVKE", picture: "goldenHour")
    let MusicInformation2 = MusicData123(songName:  "NIGHT_DANCER", SongNameLabel: "Night Dancer", Singer: "Imase", picture: "nightDancer")
    let MusicInformation3 = MusicData123(songName:  "Stay_With_Me", SongNameLabel: "Stay With Me", Singer: "松原みき", picture: "stayWithMe")
    
    
    //把型別 AVPlayer 存入常數 player，就可使用AVPlayer()裡的功能
    let player = AVPlayer()

(二)、 viewDidLoad

1. 設定漸層及陰影（陰影是用另一個view疊在下面）。

讓圖片同時有圓角和陰影 — SwiftUI & UIKit

2. 設定音樂資料及播放第一首的音樂、歌名、歌手、專輯圖。

3. 設定音量控制Slider為隱藏。

 override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //設定backgroundvView的漸層顏色
        background.frame =  backgroundView.bounds
        background.colors = [UIColor.clear.cgColor, UIColor.clear.cgColor, purple.cgColor,]
        background.locations = [0.1, 0.3, 0.8]
        backgroundView.layer.addSublayer(background)
        
        //設定陰影
        shadowView.layer.cornerRadius = CGFloat(80)
        shadowView.layer.shadowOpacity = Float(1)
        shadowView.layer.shadowRadius = CGFloat(30)
        shadowView.layer.shadowColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
        
        //設定畫面初始時，音量控制是隱藏
        volumeSlider.isHidden = true
        
        //將音樂資料包進去[]
        MusicInformations.append(MusicInformation1)
        MusicInformations.append(MusicInformation2)
        MusicInformations.append(MusicInformation3)
        
        //設定初始專輯畫面
        musicImage.image = UIImage(named: MusicInformations[0].picture)
        //設定初始歌名
        musicName.text = MusicInformations[0].SongNameLabel
        //設定初始歌手名稱
        singerLabel.text = MusicInformations[0].Singer
        //播放音樂
        //1.透過 Bundle.main 讀取程式本身的資料夾，找到音樂mp3檔的url路徑
        let fileUrl = Bundle.main.url(forResource: MusicInformations[index].songName, withExtension: "mp3")!
        //2.利用 AVPlayerItem 生成要播放的音樂
        let playerItem = AVPlayerItem(url: fileUrl)
        //3.設定 player 要播放的 AVPlayerItem
        player.replaceCurrentItem(with: playerItem)
        //4.開始播放
        player.play()
        
    }

（三）、其他function

1. 暫停及播放功能：這邊使用到if來判斷狀態，若為播放中，及暫停;否則繼續播放。

//音樂播放及暫停功能
    @IBAction func playAndPause(_ sender: UIButton) {
        if player.rate != 0 {
            //暫停播放
            player.pause()
            //button顯示播放圖示
            sender.setImage(UIImage(systemName: "play.fill"), for: .normal)
        } else {
            player.play()
            //button顯示播放圖示
            sender.setImage(UIImage(systemName: "pause.fill"), for: .normal)
        }

2. 播放下一首/上一首

//設定播放下一首功能
    @IBAction func next(_ sender: Any) {
        //設定下一首的數學公式
        index = (index + 1)%MusicInformations.count
        //播放音樂
        let fileUrl = Bundle.main.url(forResource: MusicInformations[index].songName, withExtension: "mp3")!
        let playerItem = AVPlayerItem(url: fileUrl)
        player.replaceCurrentItem(with: playerItem)
        player.play()
        
        //設定初始專輯畫面
        musicImage.image = UIImage(named: MusicInformations[index].picture)
        //設定初始歌名
        musicName.text = MusicInformations[index].SongNameLabel
        //設定初始歌手名稱
        singerLabel.text = MusicInformations[index].Singer
        }

 //設定回到上一首功能
    @IBAction func pre(_ sender: Any) {
        //設定上一首的數學公式
        index = (index+MusicInformations.count-1)%MusicInformations.count
        //播放音樂
        let fileUrl = Bundle.main.url(forResource: MusicInformations[index].songName, withExtension: "mp3")!
        let playerItem = AVPlayerItem(url: fileUrl)
        player.replaceCurrentItem(with: playerItem)
        player.play()
        
        //設定初始專輯畫面
        musicImage.image = UIImage(named: MusicInformations[index].picture)
        //設定初始歌名
        musicName.text = MusicInformations[index].SongNameLabel
        //設定初始歌手名稱
        singerLabel.text = MusicInformations[index].Singer
    }

3. 隨機播放

//設定音樂隨機播放
    @IBAction func shuffle(_ sender: Any) {
        //設定順序shuffle
        MusicInformations.shuffle()
        
        //播放音樂
        let fileUrl = Bundle.main.url(forResource: MusicInformations[index].songName, withExtension: "mp3")!
        let playerItem = AVPlayerItem(url: fileUrl)
        player.replaceCurrentItem(with: playerItem)
        player.play()
        
        //設定初始專輯畫面
        musicImage.image = UIImage(named: MusicInformations[index].picture)
        //設定初始歌名
        musicName.text = MusicInformations[index].SongNameLabel
        //設定初始歌手名稱
        singerLabel.text = MusicInformations[index].Singer
    }

4. 音量控制及隱藏（手勢為點一下）

//設定出現slider控制音量
    @IBAction func volumeChange(_ sender: Any) {
        volumeSlider.isHidden = false
    }
    //設定調整音量slider
    @IBAction func volumeSlider(_ sender: UISlider) {
        player.volume = sender.value
    }
    //設定點旁邊隱藏音量slider
    @IBAction func hideen(_ sender: Any) {
        volumeSlider.isHidden = true
    }

附上github

GitHub - HydeeChen/musicAPP