將音樂,影片,文字檔等素材加到 iOS App,然後透過 URL 讀取

彼得潘的 iOS App Neverland
6 min readOct 18, 2022

--

開發 iOS App 時,我們時常需要將音樂,影片,文字檔等素材加到專案,然後再透過檔案的 URL 讀取內容。接下來讓我們以加入 Hebe 小幸運的 mp3 為例說明。

將小幸運.mp3 拖曳到 project navigator 下

選擇 Copy files & 勾選 Targets

Copy files to destination 會將檔案複製一份,存到專案的資料夾下。勾選 Targets Demo 表示生成的 App Demo 會將檔案加入,若是忘了勾選,生成的 App 將不會包含此檔案,程式將讀取不到檔案。

ps: 若是忘了勾選 Targets,會發生很可怕的事。之後從程式讀取檔案的 URL 時將得到 nil,出現以下錯誤。

別擔心,可參考以下方法補救。

取得檔案的 URL

我們開發生成的 App 其實是一個資料夾,資料夾下將包含 App 的執行檔和 project navigator 下的素材檔。如下圖所示,小幸運.mp3 出現在 App 的資料夾裡。

查看 App 資料夾的相關說明可參考以下連結。

讀取 App 資料夾下的檔案,可透過代表 App 資料夾的 main bundle。

先利用 Bundle.main 得到 main bundle,然後再呼叫 function url(forResource:withExtension:) 取得檔案的 URL。參數 forResource 傳入檔案的名字,withExtension 傳入附檔名。

let url = Bundle.main.url(forResource: "小幸運", withExtension: "mp3")

以上程式在模擬器執行時,印出的路徑如下,檔案將存在 Containers/Bundle 下。另外有一點值得注意的,Containers/Bundle 下的檔案是唯讀的,它只能讀取,不能修改。

file:///Users/peterpan/Library/Developer/CoreSimulator/Devices/41332752-EE96-43DA-97B6-BF73AB98CA91/data/Containers/Bundle/Application/BE8B9F83-9C87-49C0-8133-334B701950FD/Demo.app/%E5%B0%8F%E5%B9%B8%E9%81%8B.mp3

如果傳入的檔案找不到,將得到 nil,比方以下例子將找不到大幸運.mp3。

let url = Bundle.main.url(forResource: "大幸運", withExtension: "mp3")

範例: 透過音檔的 URL 播放音樂

  • SwiftUI
import SwiftUI
import AVFoundation

struct ContentView: View {

let player = AVPlayer()

var body: some View {
VStack {
Image(systemName: "heart.circle.fill")
.resizable()
.scaledToFit()
.foregroundStyle(.pink)
Text("原來你是我最想留住的幸運")
.font(.largeTitle)
}
.padding()
.onAppear {
let url = Bundle.main.url(forResource: "小幸運", withExtension: "mp3")!
let playerItem = AVPlayerItem(url: url)
player.replaceCurrentItem(with: playerItem)
player.play()
}
}
}
  • UIKit
import UIKit
import AVFoundation

class ViewController: UIViewController {

let player = AVPlayer()

override func viewDidLoad() {
super.viewDidLoad()

let url = Bundle.main.url(forResource: "小幸運", withExtension: "mp3")!
let playerItem = AVPlayerItem(url: url)
player.replaceCurrentItem(with: playerItem)
player.play()
}
}

--

--

彼得潘的 iOS App Neverland

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com