音楽再生アプリを作ってみましょう！

プロジェクトを作成

まずはXcodeを開き、Create New Project... をクリックします。
App を選択して、

Product Name を入力し、Interface をSwiftUI にします。

最後に保存場所を選択してCreate をクリックします。

Musicクラスを作ろう

データを管理するためのクラス を作っていきます！

⌘ + N を押し、Swift File を選択して、Next を押します。

一番上のファイル名をMusic.swift にして、右下のCreate をクリックします。

ファイルが作成できたら、以下のコードをコピペしましょう。

Music.swift

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 をダブルクリックし、以下のコードをコピペしましょう。

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を付け足していくことで、いくらでも曲を追加できます！
あなただけの音楽再生アプリを作ってくださいね！