＃59 Music App 音樂播放器

千呼萬喚始出來！文組里程碑：音樂播放器 Music App 🎵

先掌聲恭喜自己又達成一個里程碑！因為當初Peter在介紹哪些作業時，講到音樂播放器這個作業的時候，我就覺得能做出音樂App是一個非常浪漫的事情～如今在完成文組班課程後的我達成啦！雖然卡關很久，久到Peter說很久沒看我發作業，但我想說…我…我只是卡關啊嗚嗚嗚QAQ

成果畫面

App功能有：

1. 使用AVPlayer播放音樂
2. 音樂播放／暫停
3. 上一首下一首
4. 自動輪放音樂
5. 調整音樂區段、音量

使用AVPlayer播放音樂

import UIKit
import AVFoundationclass ViewController: UIViewController {
    
    let player = AVPlayer()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let fileUrl = Bundle.main.url(forResource: "music", withExtension: "mp4")!
        let playerItem = AVPlayerItem(url: fileUrl)
        player.replaceCurrentItem(with: playerItem)
        player.play()
    }}

音樂播放／暫停

if plarPauseButton.currentImage == UIImage(systemName: “pause.fill”){
 player.play()
 } else if plarPauseButton.currentImage == UIImage(systemName: “play.fill”){
 player.pause()
 }

運用Button設定的Image來判斷播放音樂或是暫停播放

播放/暫停

上一首下一首

@IBAction func nextSong(_ sender: UIButton) {
 if playlist == “A” {
 musicindex += 1
 if musicindex == 10 {
 musicindex = 0
 }
 nextPre(c: musicindex)
 } else if playlist == “B” {
 musicindex += 1
 if musicindex == 7 {
 musicindex = 0
 }
 nextPre(c: musicindex)
 } else if playlist == “C” {
 musicindex += 1
 if musicindex == 17 {
 musicindex = 0
 }
 nextPre(c: musicindex)
 }
 }

因為我的歌曲有分三個清單，所以我運用字串設定不同清單的名稱，對應到字串的playlist會播放那個清單的歌曲。

上一首/下一首

自動輪放音樂

參考學姊文章：

Music App音樂播放器

調整音樂區段、音量

．控制音樂Slider、顯示音樂播放時間

抓取音樂時間

songDuration = playerItem.asset.duration.seconds

．控制系統音量（這部分我沒有使用，但大家可以參考Peter文章去做使用

利用 AVPlayer 播放音樂音效

複習以前使用過的技巧

這次作業也拿出很多之前所學技巧，讓整個App使用起來更有豐富感～

．設定 content size，實現水平捲動，上下捲動和分頁的 scroll view

設定 content size，實現水平捲動，上下捲動和分頁的 scroll view

滾動頁面

．讓 view 變圓角的 layer.cornerRadius

讓 view 變圓角的 layer.cornerRadius

圖片圓角

．利用 CAGradientLayer 製作漸層

利用 CAGradientLayer 製作漸層背景

背景漸層

．客製 UIKit 的 UISlider 樣式

客製 UIKit 的 UISlider 樣式

客製UISlider樣式

成品如下：

(請忽略背景雜音QAQ

感謝大家觀看