Reproduce sonido en SwiftUI con AVAudioPlayer

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

AVAudioPlayer en SwiftUI nos permite reproducir sonidos o audios en nuestra app. Son muy útiles para crear nuestra propia firma. Lo único que necesitamos en el sonido que queremos reproducir y una instancia de AVAudioPlayer.

SwiftBeta

27 sep. 2021

Tabla de contenido

👇 SÍGUEME PARA APRENDER SWIFTUI, SWIFT, XCODE, etc 👇

▶️ ¡Suscríbete al canal! 🤩 ¡Sígueme en Twitter! 📙 COMPRAR EL LIBRO DE SWIFT ⭐️

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:

Otro enlace para descargar recursos de sonido:

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")
]

Struct SoundModel en SwiftUI

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()
                }
            }
        }
    }
}

Uso de AVAudioPlayer en SwiftUI

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())
                }
            }
        }
    }
}

Optimizamos código extrayendo AVAudioPlayer a una clase

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.