Just_audio play multiple audios flutter

Question

Hello everyone I built chat app in flutter and I use just_audio package to listen to voice messages but when I play an audio all progress bar in the chat play. how to play only one audio when I press it?

Describe in image: Image

Controller class:

class Controller extends GetxController {

  final progressNotifier = ValueNotifier<ProgressBarState>(
    ProgressBarState(
      current: Duration.zero,
      buffered: Duration.zero,
      total: Duration.zero,
    ),
  );

  final buttonNotifier = ValueNotifier<ButtonState>(ButtonState.paused);

  final url = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3';
  late AudioPlayer audioPlayer;

  Controller(){
    _init();
  }

  Future<void> func(final url)async {
    await audioPlayer.setUrl(url);
    print(' --------------- $url --------------- ');
  }

  void _init() async {
    audioPlayer = AudioPlayer();
    func(url);
    audioPlayer.playerStateStream.listen((playerState) {
      final isPlaying = playerState.playing;
      final processingState = playerState.processingState;
      if (processingState == ProcessingState.loading ||
          processingState == ProcessingState.buffering) {
        buttonNotifier.value = ButtonState.loading;
      } else if (!isPlaying) {
        buttonNotifier.value = ButtonState.paused;
      } else if (processingState != ProcessingState.completed) {
        buttonNotifier.value = ButtonState.playing;
      } else {
        audioPlayer.seek(Duration.zero);
        audioPlayer.pause();
      }
    });

    audioPlayer.positionStream.listen((position) {
      final oldState = progressNotifier.value;
      progressNotifier.value = ProgressBarState(
        current: position,
        buffered: oldState.buffered,
        total: oldState.total,
      );
    });

    audioPlayer.bufferedPositionStream.listen((bufferedPosition) {
      final oldState = progressNotifier.value;
      progressNotifier.value = ProgressBarState(
        current: oldState.current,
        buffered: bufferedPosition,
        total: oldState.total,
      );
    });

    audioPlayer.durationStream.listen((totalDuration) {
      final oldState = progressNotifier.value;
      progressNotifier.value = ProgressBarState(
        current: oldState.current,
        buffered: oldState.buffered,
        total: totalDuration ?? Duration.zero,
      );
    });
  }

  void play() {
    audioPlayer.play();
  }

  void pause() {
    audioPlayer.pause();
  }

  void seek(Duration position) {
    audioPlayer.seek(position);
  }

@override
  void onClose() {
    super.onClose();
    audioPlayer.dispose();
  }

class ProgressBarState {
  ProgressBarState({
    required this.current,
    required this.buffered,
    required this.total,
  });
  final Duration current;
  final Duration buffered;
  final Duration total;
}

enum ButtonState { paused, playing, loading }

}

Main class:

GetBuilder(
  init:
      Controller(),
  builder: (_) {
    return Column(
      children: [
        const Spacer(),
        ValueListenableBuilder<
            ProgressBarState>(
          valueListenable:
              controller.progressNotifier,
          builder: (_,
              value,
              __) {
            return ProgressBar(
              progress: value.current,
              buffered: value.buffered,
              total: value.total,
              onSeek: controller.seek,
            );
          },
        ),
        ValueListenableBuilder<
            ButtonState>(
          valueListenable: controller.buttonNotifier,
          builder: (_,
              value,
              __) {
            switch (value) {
              case ButtonState.loading:
                return Container(
                  margin: const EdgeInsets.all(8.0),
                  width: 32.0,
                  height: 32.0,
                  child: const CircularProgressIndicator(),
                );
              case ButtonState.paused:
                return IconButton(
                  icon: const Icon(Icons.play_arrow),
                  iconSize: 32.0,
                  onPressed: ()async{
                    await controller.func(currentFile.url.toString());
                    controller.play();
                  },
                );
              case ButtonState.playing:
                return IconButton(
                  icon: const Icon(Icons.pause),
                  iconSize: 32.0,
                  onPressed: controller.pause,
                );
            }
          },
        ),
      ],
    );
  },
)

If anyone know what the problem please tell me.

Answer 1

I was able to get your code to compile and produce the expected output with the following changes:

• Changing the definition of Cycler from class Cycler<Elements extends Array<any>> to class Cycler<E>.
• Changing the signature of Cycler's constructor from constructor(private elements: Elements) to constructor(private elements: E[]).

TS Playground