In recent years, SwiftUI has played a significant role in Apple’s app development ecosystem. SwiftUI provides an intuitive way to build UI with a declarative syntax, similar to Flutter. Today, we will explore how to create an audio app using SwiftUI and add images that change dynamically based on the playback state.<\/p>\n
SwiftUI is Apple’s latest UI framework designed to create UIs more simply and intuitively than previous UIKit. However, to directly handle audio, the AVFoundation framework must be used. Combining these two allows developers to create powerful multimedia-supported apps.<\/p>\n
AVFoundation is a powerful framework for handling audio and video content. It allows for easy implementation of features such as playing, pausing, and stopping audio files.<\/p>\n
SwiftUI is a framework that allows UIs to be constructed declaratively, easily reflecting gestures such as clicks and swipes to respond to state changes. A SwiftUI view maintains its own state and is updated immediately whenever that state changes.<\/p>\n
Let\u2019s set up a basic structure for a simple audio app using SwiftUI. Open Xcode and create a new SwiftUI project. Select “App” and give it an appropriate name.<\/p>\n
To use the AVFoundation framework, you need to add a description requesting permission for audio playback in the project’s To build a simple UI, let’s use SwiftUI’s We will use AVAudioPlayer to play audio files. First, import the AVFoundation framework and initialize the audio player.<\/p>\n Now we’ll connect the Enhance the user experience by adding images that display differently based on the audio playback state, helping users easily understand the current status visually.<\/p>\n First, you need to add images for the play and pause buttons to your project. Go to To update the playback state images according to state changes, add a property in We have now implemented the functionality of dynamically changing images based on playback state in our simple SwiftUI-based audio app. By leveraging the powers of SwiftUI and AVFoundation, you can create an audio app with many features.<\/p>\n Consider adding more features to create your own audio player. For example, you can add playlist support, display playback time, or incorporate UI elements that show song information. We hope this process has deepened your understanding of SwiftUI, and we will return with more useful information next time.<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Info.plist<\/code> file. Add the following key-value pair:<\/p>\n\n
\n2.2 Building the Basic UI<\/h3>\n
VStack<\/code> and Button<\/code>. Below is the code for the basic UI:<\/p>\n\n
\nstruct ContentView: View {\n var body: some View {\n VStack {\n Text(\"Audio Player\")\n .font(.largeTitle)\n .padding()\n \n Button(action: {\n \/\/ Add play function\n }) {\n Text(\"Play\")\n .font(.title)\n .padding()\n .background(Color.blue)\n .foregroundColor(.white)\n .cornerRadius(10)\n }\n \n Button(action: {\n \/\/ Add pause function\n }) {\n Text(\"Pause\")\n .font(.title)\n .padding()\n .background(Color.red)\n .foregroundColor(.white)\n .cornerRadius(10)\n }\n }\n }\n}\n<\/code>\n<\/pre>\n3. Implementing Audio Playback Logic<\/h2>\n
3.1 Creating the Audio Player Class<\/h3>\n
\n
\nimport AVFoundation\n\nclass AudioPlayer: ObservableObject {\n var player: AVAudioPlayer?\n @Published var isPlaying: Bool = false\n \n func playAudio() {\n guard let url = Bundle.main.url(forResource: \"audio_file\", withExtension: \"mp3\") else { return }\n \n do {\n player = try AVAudioPlayer(contentsOf: url)\n player?.play()\n isPlaying = true\n } catch {\n print(\"Error playing audio: \\(error.localizedDescription)\")\n }\n }\n \n func pauseAudio() {\n player?.pause()\n isPlaying = false;\n }\n}\n<\/code>\n<\/pre>\n3.2 Connecting UI<\/h3>\n
AudioPlayer<\/code> class with the SwiftUI view to enable the play button and state functionality.<\/p>\n\n
\nstruct ContentView: View {\n @ObservedObject var audioPlayer = AudioPlayer()\n \n var body: some View {\n VStack {\n Text(\"Audio Player\")\n .font(.largeTitle)\n .padding()\n \n Button(action: {\n if audioPlayer.isPlaying {\n audioPlayer.pauseAudio()\n } else {\n audioPlayer.playAudio()\n }\n }) {\n Text(audioPlayer.isPlaying ? \"Pause\" : \"Play\")\n .font(.title)\n .padding()\n .background(audioPlayer.isPlaying ? Color.red : Color.blue)\n .foregroundColor(.white)\n .cornerRadius(10)\n }\n }\n .onChange(of: audioPlayer.isPlaying) { newValue in\n \/\/ Add logic to change image based on state change\n }\n }\n}\n<\/code>\n<\/pre>\n4. Adding Playback State Images<\/h2>\n
4.1 Adding Images<\/h3>\n
Assets.xcassets<\/code> and add appropriate images. Name the two images “play” and “pause”, then link them for use in SwiftUI.<\/p>\n4.2 Managing Image States<\/h3>\n
ContentView<\/code> to display the images.<\/p>\n\n
\nstruct ContentView: View {\n @ObservedObject var audioPlayer = AudioPlayer()\n \n var body: some View {\n VStack {\n Text(\"Audio Player\")\n .font(.largeTitle)\n .padding()\n \n Image(audioPlayer.isPlaying ? \"pause\" : \"play\")\n .resizable()\n .aspectRatio(contentMode: .fit)\n .frame(width: 100, height: 100)\n .padding()\n \n Button(action: {\n if audioPlayer.isPlaying {\n audioPlayer.pauseAudio()\n } else {\n audioPlayer.playAudio()\n }\n }) {\n Text(audioPlayer.isPlaying ? \"Pause\" : \"Play\")\n .font(.title)\n .padding()\n .background(audioPlayer.isPlaying ? Color.red : Color.blue)\n .foregroundColor(.white)\n .cornerRadius(10)\n }\n }\n }\n}\n<\/code>\n<\/pre>\n5. Conclusion<\/h2>\n