SwiftUIで音楽再生アプリを作ってみよう！

音楽再生アプリを作ってみましょう！
![Screenshot 2024-06-18 at 23.50.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/addb2cd2-28e3-50f8-1777-3ecb37710f10.png)

# プロジェクトを作成
まずはXcodeを開き、**Create New Project...** をクリックします。
**App** を選択して、
![Screenshot 2024-06-18 at 23.53.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/3bfd996a-3b6b-e1e4-0b6d-bb67b3c4d5da.png)

**Product Name** を入力し、**Interface** を**SwiftUI** にします。
![Screenshot 2024-06-18 at 23.54.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/a1bc4b53-fbf2-832e-7e48-a29745dda9ee.png)

最後に保存場所を選択して**Create** をクリックします。
![Screenshot 2024-06-18 at 23.56.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/8c631f34-7ff8-9867-13f4-8a5ab07cafa1.png)

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

`⌘ + N` を押し、**Swift File** を選択して、**Next** を押します。
![Screenshot 2024-06-18 at 23.59.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/f4e676e1-811b-9c83-4e59-823030e25a85.png)

一番上のファイル名を**Music.swift** にして、右下の**Create** をクリックします。
![Screenshot 2024-06-19 at 0.00.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/e51b3f10-82a2-7588-9bae-70b4343d2222.png)

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

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

```swift: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` を押してみましょう！
![Screenshot 2024-06-19 at 0.06.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/71b88eec-1a3a-d4ac-e62b-ef999a0fdbfd.png)

# 音楽と画像を追加しよう
まずは音楽を追加しましょう。
好きな音楽を用意し、ファイルの名前を`song1.mp3`としましょう。

![Screenshot 2024-06-19 at 0.08.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/e4c8f54d-5ed1-f1dc-d0b6-75354914a527.png)

この`song1.mp3` を、画面左側にドラッグ＆ドロップしましょう。

![Screenshot 2024-06-19 at 0.10.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/043de141-dfa3-651d-ccea-c3463e148434.png)

この位置にチェックが入っていることを確認して**Finish** を押します。

![Screenshot 2024-06-19 at 0.10.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/4056c3aa-9b2b-db0f-d58f-e3717ad57ad4.png)

Canvasで**Title 1** の部分をクリックすると音が流れたでしょうか？
音が流れなかった場合は、以下を確認してみましょう！
1. ファイル名が間違っていないこと
1. PCの音量が0になっていないこと

次に画像を追加します。
まずはAssetsをクリックして開きます。

![Screenshot 2024-06-19 at 0.13.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/d5209abf-285a-8667-0058-be7cc15cd6ad.png)

青枠の部分に、追加したい画像（アイコンなど）をドラッグ＆ドロップしましょう。
画像の名前は`image1`にしてくださいね！

![Screenshot 2024-06-19 at 0.15.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/ef1caf66-6f6a-876d-8e15-4bc093d15fd5.png)

ContentViewに戻って、アイコンが表示されていたら完成です！

![Screenshot 2024-06-19 at 0.16.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/a4e30e71-1ec2-46f1-aae2-04bac646d401.png)

同じように、`song2.mp3`と`image2`、`song3.mp3`と`image3`を追加して、アプリを完成させましょう！
また、`ContentView`の`musicList`を更新すると、タイトルを変更できます！

```swift
@State private var musicList: [Music] = [
    Music(title: "アイドル", fileName: "song1", imageName: "image1"),
    Music(title: "ライラック", fileName: "song2", imageName: "image2"),
    Music(title: "ターコイズ", fileName: "song3", imageName: "image3")
]
```

![Screenshot 2024-06-18 at 23.50.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/7e82f22d-7bf4-ed0c-cd24-822f3c7c9b2f.png)

また、この`musicList`を付け足していくことで、いくらでも曲を追加できます！
あなただけの音楽再生アプリを作ってくださいね！