Añadir audio o sonidos en Flutter

Tiempo de lectura: 2 minutos

Para añadir audio o sonidos en Flutter vamos a utilizar la librería audioplayers.

Primero la instalamos:

flutter pub add audioplayers

Luego, ejecuta flutter pub get en tu terminal para instalar la dependencia.

Organizar la estructura del proyecto

Si aún no lo has hecho, organiza tu proyecto Flutter de manera que tengas una carpeta para los recursos, como imágenes y sonidos. Por ejemplo:

- my_flutter_app
  - android
  - ios
  - lib
  - assets
    - sounds
      - button_press.mp3
  - pubspec.yaml

Importar la biblioteca de audio

En el archivo donde planeas usar el sonido (por ejemplo, main.dart), importa la biblioteca de audio:

import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';

Crear una instancia de AudioPlayer

Dentro de tu clase (puede ser un StatefulWidget), crea una instancia de AudioPlayer:

class MyApp extends StatelessWidget {
  final AudioPlayer audioPlayer = AudioPlayer();

  // Resto del código de la aplicación
}

Configurar archivos en assets

Asegúrate de configurar el archivo pubspec.yaml para incluir la carpeta de sonidos:

flutter:
  assets:
    - assets/sounds/

Agregar sonido al evento del botón

Dentro de tu widget de botón, agrega la reproducción de sonido en el evento onPressed:

ElevatedButton(
  onPressed: () {
   audioPlayer.play(AssetSource('sounds/button_press.mp3'));
  },
  child: Text('Pulsar para sonido'),
)

Ejecutar la aplicación

Guarda tus cambios y ejecuta tu aplicación Flutter con flutter run desde la terminal. Cuando pulses el botón, deberías escuchar el sonido que configuraste.

También puedes crear una clase sonido para ejecutarlo desde todos tus botones:

Paso 1: Crear un archivo de utilidad audio_util.dart

// audio_util.dart

import 'package:audioplayers/audioplayers.dart';

class AudioUtil {
  static final AudioPlayer _audioPlayer = AudioPlayer();

   static Future<void> playButtonPressSound() async {
    await _audioPlayer.play(AssetSource('sounds/button_press.mp3'));
  }
}

Paso 2: Usar la utilidad en tu aplicación

// main.dart

import 'package:flutter/material.dart';
import 'audio_util.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Sound Button'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              await AudioUtil.playButtonPressSound();
            },
            child: Text('Pulsar para sonido'),
          ),
        ),
      ),
    );
  }
}

Ahora, puedes utilizar AudioUtil.playButtonPressSound() desde cualquier parte de tu aplicación donde importes audio_util.dart para reproducir el sonido al pulsar un botón.

Aquí viene toda la información completa de la API: https://github.com/bluefireteam/audioplayers/blob/main/getting_started.md