音楽再生アプリを作ってみましょう！
プロジェクトを作成
まずはXcodeを開き、Create New Project... をクリックします。
App を選択して、
Product Name を入力し、Interface をSwiftUI にします。
最後に保存場所を選択してCreate をクリックします。
Musicクラスを作ろう
データを管理するためのクラス を作っていきます！
⌘ + N を押し、Swift File を選択して、Next を押します。
一番上のファイル名をMusic.swift にして、右下のCreate をクリックします。
ファイルが作成できたら、以下のコードをコピペしましょう。
import Foundation
import AVFoundation
class Music: Identifiable {
let id = UUID()
let title: String
let fileName: String
let imageName: String
var player: AVAudioPlayer?
init(title: String, fileName: String, imageName: String) {
self.title = title
self.fileName = fileName
self.imageName = imageName
prepareToPlay()
}
func prepareToPlay() {
guard let url = Bundle.main.url(forResource: fileName, withExtension: "mp3") else { return }
do {
player = try AVAudioPlayer(contentsOf: url)
player?.prepareToPlay()
} catch {
print("Error loading \(fileName): \(error.localizedDescription)")
}
}
func play() {
player?.play()
}
func stop() {
player?.stop()
}
}
画面を作っていこう
次に画面左側からContentView をダブルクリックし、以下のコードをコピペしましょう。
import SwiftUI
import AVFoundation
struct ContentView: View {
@State private var musicList: [Music] = [
Music(title: "Title 1", fileName: "song1", imageName: "image1"),
Music(title: "Title 2", fileName: "song2", imageName: "image2"),
Music(title: "Title 3", fileName: "song3", imageName: "image3")
]
var body: some View {
NavigationView {
List {
ForEach(musicList) { music in
Button(action: {
music.play()
}) {
HStack {
Image(music.imageName)
.resizable()
.frame(width: 50, height: 50)
.cornerRadius(5)
Text(music.title)
}
}
}
}
.navigationTitle("DJ MUSIC")
}
}
}
#Preview {
ContentView()
}
以下のように画面が出てきたら成功です！
もし画面が出てこない場合は、option + ⌘ + enter を押してみましょう！
音楽と画像を追加しよう
まずは音楽を追加しましょう。
好きな音楽を用意し、ファイルの名前をsong1.mp3としましょう。
このsong1.mp3 を、画面左側にドラッグ＆ドロップしましょう。
この位置にチェックが入っていることを確認してFinish を押します。
CanvasでTitle 1 の部分をクリックすると音が流れたでしょうか？
音が流れなかった場合は、以下を確認してみましょう！
- ファイル名が間違っていないこと
- PCの音量が0になっていないこと
次に画像を追加します。
まずはAssetsをクリックして開きます。
青枠の部分に、追加したい画像（アイコンなど）をドラッグ＆ドロップしましょう。
画像の名前はimage1にしてくださいね！
ContentViewに戻って、アイコンが表示されていたら完成です！
同じように、song2.mp3とimage2、song3.mp3とimage3を追加して、アプリを完成させましょう！
また、ContentViewのmusicListを更新すると、タイトルを変更できます！
@State private var musicList: [Music] = [
Music(title: "アイドル", fileName: "song1", imageName: "image1"),
Music(title: "ライラック", fileName: "song2", imageName: "image2"),
Music(title: "ターコイズ", fileName: "song3", imageName: "image3")
]
また、このmusicListを付け足していくことで、いくらでも曲を追加できます！
あなただけの音楽再生アプリを作ってくださいね！