In this tutorial, we’ll explore how to build a simple audio player in SwiftUI that plays music from a web link. This is perfect for podcast apps, online courses, or any application where you’d want to stream audio content. Let’s dive in!

Introduction

SwiftUI, Apple’s modern UI toolkit, makes it easy to create beautiful and intuitive UIs for all Apple platforms. Combined with AVFoundation, a framework that provides audio playback capabilities, we can craft a feature-packed audio player in just a few lines of code.

Prerequisites

• Basic knowledge of SwiftUI.
• Familiarity with AVFoundation.
• Xcode installed on your Mac.

1. Setting Up the Audio Player ViewModel

Before diving into the view, let’s create a ViewModel to manage our audio playback logic:

class AudioPlayerViewModel: ObservableObject {
    private var audioPlayer: AVPlayer?

    // This method will setup the player with a given URL
    func setupPlayer(url: URL) {
        audioPlayer = AVPlayer(url: url)
    }

    // Play the audio
    func play() {
        audioPlayer?.play()
    }

    // Pause the audio
    func pause() {
        audioPlayer?.pause()
    }

    // Stop and reset the audio
    func stop() {
        audioPlayer?.pause()
        audioPlayer?.seek(to: CMTime.zero)
    }
}

Explanation:

• We’re using AVPlayer from AVFoundation for playback.
• setupPlayer(url:) initializes the AVPlayer with a provided URL.
• play(), pause(), and stop() methods control the playback of our audio.

2. Designing the Audio Player View

Now, let’s design our audio player view with play, pause, and stop buttons:

struct AudioPlayerView: View {
    @StateObject private var viewModel = AudioPlayerViewModel()

    let audioURL: URL

    init(audioURL: String) {
        self.audioURL = URL(string: audioURL)!
        _viewModel = StateObject(wrappedValue: AudioPlayerViewModel())
    }

    var body: some View {
        VStack {
            HStack {
                Button(action: viewModel.play) {
                    Image(systemName: "play.fill")
                        .resizable()
                        .frame(width: 50, height: 50)
                        .padding()
                }

                Button(action: viewModel.pause) {
                    Image(systemName: "pause.fill")
                        .resizable()
                        .frame(width: 50, height: 50)
                        .padding()
                }

                Button(action: viewModel.stop) {
                    Image(systemName: "stop.fill")
                        .resizable()
                        .frame(width: 50, height: 50)
                        .padding()
                }
            }
        }
        .onAppear {
            viewModel.setupPlayer(url: audioURL)
        }
    }
}

Explanation:

• We initialize the AudioPlayerViewModel with @StateObject to ensure it remains persistent.
• The view takes an audio URL (as a string) upon initialization.
• Three buttons provide playback controls. They utilize system icons for a native feel.
• When the view appears, it sets up the player using the setupPlayer(url:) method.

3. Displaying the Audio Player

To use our AudioPlayerView, simply embed it in any parent view, like this:

struct ContentView: View {
    var body: some View {
        AudioPlayerView(audioURL: "https://public-files/publicaudio/Audio17.wav")
    }
}

Conclusion

Congratulations! You’ve just built a web-based audio player in SwiftUI. This flexible component can be incorporated into larger applications or expanded with additional features such as a progress bar, volume control, or track metadata display.

Remember, the combination of SwiftUI and AVFoundation provides a powerful toolkit for developing rich multimedia applications. Happy coding!