For the Seventh prompt, we have Soundtrack. What will you create?

I’m looking forward to seeing what you come up with today.

Getting Started

---

1. Set Up Your Project

You can find the sample project in the GitHub repository here

Create a new SwiftUI project in Xcode:

1. Open Xcode and select Create a new project.
2. Choose the App template, click Next.
3. Enter your project name (e.g., “FestiveSoundboard”), set the interface to SwiftUI, and click Create.

---

What You’ll Learn

1. Building a responsive grid layout for buttons.
2. Using AVAudioPlayer to play sound files.
3. Styling buttons with vibrant colors and shadows.
4. Adding a custom background for a festive feel.

---

Resources

You can find the sample project in the GitHub repository here

Below are all the links to each resource I used. Feel free to mix it up though!

Jingle Bells Sound – Sleigh Bells Sound – Santa Sound – Fireplace Sound – Brass Band – Elf Sound – Background Image

---

Step 1: Setting Up the Soundboard Layout

The core of the app is a grid of buttons, where each button corresponds to a festive sound. Start by defining the layout using SwiftUI’s LazyVGrid.

Code Snippet: Soundboard Layout

struct ContentView: View {
    let sounds: [(name: String, color: Color, file: String)] = [
        ("Jingle Bells", .red, "jingle-bells"),
        ("Santa", .green, "santa"),
        ("Sleigh Bells", .blue, "sleigh-bells"),
        ("Fireplace", .purple, "fireplace"),
        ("Brass Band", .orange, "brass-band"),
        ("Elf Chatter", .yellow, "elf-chatting")
    ]

    var body: some View {
        NavigationView {
            VStack(spacing: 20) {
                // Header
                Text("Festive Soundboard")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .padding()
                    .padding(.top)
                    .foregroundStyle(.white)
                    .shadow(radius: 10)
                
                Spacer()
                
                // Sound Buttons
                LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 20) {
                    ForEach(sounds, id: \.0) { sound in
                        Button {
                            playSound(named: sound.file)
                        } label: {
                            Text(sound.name)
                                .font(.headline)
                                .foregroundColor(.white)
                                .frame(maxWidth: .infinity)
                                .frame(height: 150)
                                .background(sound.color)
                                .cornerRadius(12)
                                .shadow(radius: 5)
                        }
                    }
                }
                .padding()
                
                Spacer()
            }
            .background(
                Image("bg")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .blur(radius: 3)
                    .overlay(Color.black.opacity(0.2))
                    .ignoresSafeArea()
            )
        }
    }
}

Explanation:

1. Sound Data: Each sound has a name, a color, and a file name stored in the sounds array.
2. Grid Layout: A LazyVGrid arranges buttons in a 2-column grid.
3. Button Design:
   • Background Colors: Each button is styled with a unique color from the sounds array.
   • Shadows and Rounded Corners: Add depth and style with cornerRadius and shadow.

---

Step 2: Playing Sounds

Now that the buttons are in place, let’s add functionality to play the sounds when a button is tapped. This is done using the AVAudioPlayer class. I should note, if you are new to adding sound files into your application, simply drag and drop them into your Xcode project along the left (file navigator), when prompted, make sure your app is ticked as the target and continue on.

Code Snippet: Sound Playback

import AVFoundation

struct ContentView: View {
    @State private var audioPlayer: AVAudioPlayer?

    func playSound(named fileName: String) {
        // Attempt to load .mp3 file
        if let url = Bundle.main.url(forResource: fileName, withExtension: "mp3") {
            playAudio(from: url)
            return
        }
        
        // Attempt to load .wav file
        if let url = Bundle.main.url(forResource: fileName, withExtension: "wav") {
            playAudio(from: url)
            return
        }
        
        // Attempt to load .aiff file
        if let url = Bundle.main.url(forResource: fileName, withExtension: "aiff") {
            playAudio(from: url)
            return
        }
        
        print("Sound file \(fileName) not found.")
    }

    private func playAudio(from url: URL) {
        do {
            audioPlayer = try AVAudioPlayer(contentsOf: url)
            audioPlayer?.play()
        } catch {
            print("Error playing sound: \(error.localizedDescription)")
        }
    }
}

Explanation:

1. File Loading: The playSound(named:) function attempts to load the sound file with .mp3, .wav, or .aiff extensions. Depending on your files you can change or remove as needed for your file extensions.
2. Audio Playback: If the file is found, it uses AVAudioPlayer to play the sound.

---

Step 3: Adding a Festive Background

A soundboard app should look as festive as it sounds! Let’s add a custom background image with a blur effect and overlay.

Code Snippet: Background Styling

.background(
    Image("bg")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .blur(radius: 3)
        .overlay(Color.black.opacity(0.2))
        .ignoresSafeArea()
)

Explanation:

• Image: The background uses an image named bg. Ensure this image is added to your asset catalog.
• Blur Effect: A subtle blur (blur(radius: 3)) softens the background.
• Overlay: A semi-transparent black overlay darkens the background for better text contrast.

---

Step 4: Final Touches

---

What’s Next?

Expand your Festive Soundboard with these ideas:

1. Add More Sounds: Include more festive audio like carol singers, snowstorms, or jingling bells.
2. Volume Control: Add a slider to let users adjust the playback volume.
3. Dynamic Colors: Randomize button colors for a fresh look every time the app is launched.
4. Interactive Animations: Add button press animations for visual feedback.

---

🎉 Congratulations! You’ve built a Festive Soundboard App in SwiftUI. Share your app with family and friends and spread the holiday cheer! 🎄