AVAudioPlayer en SwiftUI - Cómo reproducir sonido o audios con SwiftUI

Hoy en SwiftBeta vamos a aprender de dónde podemos descargar recursos de sonido para añadir a nuestra app y poderlos usar con alguna interacción: ya sea al mostrar notificaciones, pulsar un Button etc.

¿Dónde podemos descargar sonidos para nuestras apps?

Hay varias páginas, pero la que suelo utilizar es esta de material.io. Te las pongo a continuación:

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

Material Design

Otro enlace para descargar recursos de sonido:

Sound kit for prototypes from Facebook Design

Download a collection of interaction sounds for prototypes.

Aquí podemos encontrar una sección de sonidos y podemos descargarlos para usarlos en nuestras apps.

Añadir sonidos en Xcode

Una vez tenemos los sonidos descargados, podemos escoger los que queramos y arrastrarlos a nuestro proyecto en Xcode. En mi caso he escogido 5 y los he renombrado. Lo que vamos hacer a continuación es crear un Button por cada sonido, y los metermos dentro de un VStack.
Para hacerlo creamos un modelo y luego creamos el  Array de todos los modelos. Estos modelos los mapearemos con un ForEach y por cada modelo tendremos un Button.

struct SoundModel: Hashable {
    let name: String
    
    func getURL() -> URL {
        return URL(string: Bundle.main.path(forResource: name, ofType: "wav")!)!
    }
}

let arrayOfSounds: [SoundModel] = [
    .init(name: "1"),
    .init(name: "2"),
    .init(name: "3"),
    .init(name: "4"),
    .init(name: "5")
]

Esta es la parte de los modelos, ahora vamos a ver cómo quedaría la vista:

struct ContentView: View {
	@State var player: AVAudioPlayer?
    
    var body: some View {
        List {
            ForEach(arrayOfSounds, id: \.self) { sound in
                Button("Play Sound \(sound.name)") {
                    player = try! AVAudioPlayer(contentsOf: sound.getURL())
                    player?.prepareToPlay()
                    player?.play()
                }
            }
        }
    }
}

Si ahora compilamos y le damos a los Buttons de la List, vemos que funciona perfectamente, pero podemos mejorar un poco nuestro código. Vamos a crear una class llamada SoundPlayer y vamos a mover cierta lógica allí.

Y el resultado quedaría de la siguiente manera:

class SoundPlayer {
    var player: AVAudioPlayer?
        
    func play(withURL url: URL) {
        player = try! AVAudioPlayer(contentsOf: url)
        player?.prepareToPlay()
        player?.play()
    }
}

struct ContentView: View {
    private let soundPlayer = SoundPlayer()
    
    var body: some View {
        List {
            ForEach(arrayOfSounds, id: \.self) { sound in
                Button("Play Sound \(sound.name)") {
                    soundPlayer.play(withURL: sound.getURL())
                }
            }
        }
    }
}

Conclusión

Hemos visto a cómo reproducir sonido en nuestra app con SwiftUI. Es interesante añadir sonidos para crear una mejor experiencia de usuario y también para crear y dar nuestro toque diferenciador.