Individual buttons within ForEach in SwiftUI

Hi,

I'm trying to make a list of buttons (and names) to play a sound for each item in the list. When I press a button, all buttons change the image from play to pause instead only the one playing the sound. please help.

import SwiftUI
import MapKit
import AVFoundation

struct LocationDetailView: View {
   
  @EnvironmentObject private var vm: LocationsViewModel
   
  @State var song1 = false
   
  @State var soundManager = SoundManager()
   
  let location: Location
   
  var body: some View {
      VStack {
          audioList
        }
    }
}

extension LocationDetailView {
  private var audioList: some View {
    VStack{
      let array = location.soundFiles.sorted { $0.key < $1.key }
      List{
        ForEach(array, id: \.key) { (key: String, value: String) in
          HStack{
            Text(key)
              .font(.subheadline)
              .foregroundColor(.secondary)
            Spacer()
            Button(action: {
              soundManager.playSound(sound: value)
              song1.toggle()

              if song1{
                soundManager.audioPlayer?.play()
              } else {
                soundManager.audioPlayer?.pause()
              }
            }) {
              Image(systemName: song1 ? "pause.circle.fill" : "play.circle.fill")
                .resizable()
                .scaledToFill()
                .frame(width: 25, height: 25)
                .cornerRadius(10)
            }
          }
        }
      }
    }
  }
}

class SoundManager : ObservableObject {
  var audioPlayer: AVPlayer?
  func playSound(sound: String){
    if let url = URL(string: sound) {
      self.audioPlayer = AVPlayer(url: url)
    }
  }
}

struct LocationDetailView_Previews: PreviewProvider {
  static var previews: some View {
    LocationDetailView(location: LocationsDataService.locations.first!)
      .environmentObject(LocationsViewModel())
  }
}
Individual buttons within ForEach in SwiftUI
 
 
Q