導言

在這篇文章中，我們一起來打造一個簡易的廣播電台 App，這個專案的設計非常簡單，即使你是剛入門的開發者，也能輕鬆實作。透過 AVPlayer 我們可以方便地處理遠端音訊串流， 實現音樂的播放，並整合系統的音量控制功能。這個 App 具備播放、暫停功能，還能利用動畫視覺化音樂播放時的動態效果。

這次我們的 UI 主要運用程式碼動態產生，這使得整個 App 更具靈活性，也能加深你對 UIKit 的理解和掌控能力。讓我們開始吧！

學習目標

• 理解與運用 AVPlayer 播放串流音訊，進行音樂或電台串流播放。
• 了解如何使用 MPRemoteCommandCenter 來控制播放器並回應系統或外部設備發送的播放、暫停等命令。
• 動態生成 UI 元素，並使用 CABasicAnimation 實現播放動畫效果。

App 操作

這個廣播電台 App 將播放來自網路的廣播電台，並通過按鈕控制播放與暫停。當廣播播放時，UI 上的小球會開始跳動，展示簡單的動畫效果。除此之外，還會包含音量控制滑桿，讓使用者可以調整播放音量。

App 螢幕截圖

開始實作

1. 播放器設置

首先，我們使用 AVPlayer 來實現音樂的播放。AVPlayer 是 iOS 和 macOS 平台上用於播放音訊和視訊的強大媒體框架的一部分。它是 AVFoundation 框架中的一個重要類別，提供了一個簡單而靈活的介面，用於控制媒體播放、播放速率和播放時間的管理。

主要功能

• 播放媒體檔案：AVPlayer 能夠播放本地和遠端的音訊、視訊檔案，支持各種格式，如 MP3、AAC、HLS（HTTP Live Streaming）等。
• 時間控制：可以隨時暫停、播放、快轉或倒帶媒體。透過修改 rate 屬性，您可以控制播放速率，例如正常播放、快進或慢放。
• 播放狀態監控：AVPlayer 提供了多種屬性和方法來監控播放狀態，包括當播放完成、出現錯誤或進行緩衝時的反應。
• 多媒體控制：AVPlayer 支援與其他媒體控制類別（如 MPRemoteCommandCenter 和 MPVolumeView）的整合，可以方便地進行音量控制和播放狀態管理。
• 與視覺元件的結合：可以輕鬆地將 AVPlayer 與 AVPlayerLayer 結合，以便在應用程式中顯示視訊內容。這使得在播放器中顯示視訊畫面變得簡單直觀。

程式碼範例:

import AVFoundation

class PlayRadioView: UIView {
    
    var player: AVPlayer?
    
    init(frame: CGRect, radioURL: URL) {
        super.init(frame: frame)
        setupPlayer(url: radioURL)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setupPlayer(url: URL) {
        player = AVPlayer(url: url)
    }

    func play() {
        player?.play()
    }

    func pause() {
        player?.pause()
    }
}

2. 程式碼生成 UI

這次的 UI 是使用程式碼生成，包含了播放按鈕、音量滑桿和小球跳動的動畫。

import UIKit
import MediaPlayer

class RadioViewController: UIViewController {

    var playRadioViewContainer: UIView!
    var playRadioView: PlayRadioView!
    var volumeView: MPVolumeView!
    var playPauseButton: UIButton!
    private var animatingView = AnimatingView(frame: CGRect(x: 100, y: 8, width: 8, height: 8))
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupUI()
        
        // 初始化電台 URL 並創建 PlayRadioView
        let url = URL(string: "https://onair.family977.com.tw:8977/live.mp3")!
        playRadioView = PlayRadioView(frame: playRadioViewContainer.bounds, radioURL: url)
        playRadioViewContainer.addSubview(playRadioView)
    }
    
    func setupUI() {
        // 設置背景色
        view.backgroundColor = .white
        
        // 動態創建播放區域容器
        playRadioViewContainer = UIView(frame: CGRect(x: 20, y: 268, width: 374, height: 47))
        playRadioViewContainer.backgroundColor = UIColor.systemGray5.withAlphaComponent(0.7)
        playRadioViewContainer.layer.cornerRadius = 10.0
        view.addSubview(playRadioViewContainer)
        
        // 動態創建播放按鈕
        playPauseButton = UIButton(type: .system)
        playPauseButton.frame = CGRect(x: 10, y: 0, width: 100, height: 50)
        playPauseButton.setTitle("播放", for: .normal)
        playPauseButton.addTarget(self, action: #selector(playPauseButtonTapped), for: .touchUpInside)
        view.addSubview(playPauseButton)
        
        // 動態創建音量滑桿
        volumeView = MPVolumeView(frame: CGRect(x: 130, y: 300, width: 210, height: 20))
        view.addSubview(volumeView)
        
        // 動態創建小球動畫
        view.addSubview(animatingView)
    }
    
    3. 小球跳動動畫3. 小球跳動動畫


    @objc func playPauseButtonTapped() {
        if playRadioView.player?.rate == 0.0 {
            animatingView.startAnimation()
            playRadioView.play()
            playPauseButton.setTitle("暫停", for: .normal)
        } else {
            animatingView.stopAnimation()
            playRadioView.pause()
            playPauseButton.setTitle("播放", for: .normal)
        }
    }
}

3. 小球跳動動畫

使用 CABasicAnimation，我們可以實現小球隨著音樂播放時的跳動效果。

import UIKit

class AnimatingView: UIView {

    private var animationLayer: CALayer?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.clear
        layer.cornerRadius = 5.0
    }

    func startAnimation() {
        let bounceAnimation = CABasicAnimation(keyPath: "position.y")
        bounceAnimation.fromValue = layer.position.y
        bounceAnimation.toValue = layer.position.y + 20.0
        bounceAnimation.duration = 0.5
        bounceAnimation.autoreverses = true
        bounceAnimation.repeatCount = .greatestFiniteMagnitude
        layer.add(bounceAnimation, forKey: "bounceAnimation")
    }

    func stopAnimation() {
        layer.removeAllAnimations()
    }
}

4. 音量控制

通過 MPVolumeView，我們可以讓使用者控制系統音量，這也是 iOS 開發中處理音頻應用的常用方式。

volumeView = MPVolumeView(frame: CGRect(x: 130, y: 300, width: 210, height: 20))
view.addSubview(volumeView)

結語

這篇文章展示了如何使用 AVPlayer 播放網路電台，並且使用程式碼生成 UI 元素，實現了一個簡單而富有動感的廣播電台 App。AVPlayer 是一個功能強大的媒體播放工具，適合用於各種應用程序中。不論是播放音樂還是視訊，AVPlayer 都能輕鬆地滿足需求，並且提供了良好的控制能力和靈活性。

透過這個範例，我們不僅學習了如何串流播放音頻，還實現了動態生成介面及小球跳動的動畫效果，進一步提升了 App 的趣味性與互動性。