Flutter的一系列音频文件中如何一次播放一个音频文件？

Question

I have several audio files to be played, so I used ListView to represent every audio file as an item of ListView , each one with its own controllers (play/pause button and duration slider). The code is as follows (I have used one audio file for all of the items for simplicity sake):

import 'package:audioplayers/audioplayers.dart';

class AudioTestScreen extends StatelessWidget {
  const AudioTestScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Songs")),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (ctx, index) => const AudioItem(),
      ),
    );
  }
}

class AudioItem extends StatefulWidget {
  const AudioItem({Key? key}) : super(key: key);

  @override
  State<AudioItem> createState() => _AudioItemState();
}

class _AudioItemState extends State<AudioItem> {
  final audioPlayer = AudioPlayer();
  bool isPlaying = false;

  Duration duration = Duration.zero;  // For total duration
  Duration position = Duration.zero;  // For the current position

  @override
  void initState() {
    super.initState();

    setAudioPlayer();

    audioPlayer.onDurationChanged.listen((newDuration) {
      setState(() {
        duration = newDuration;
      });
    });

    audioPlayer.onPositionChanged.listen((newPosition) {
      if (mounted) {
        setState(() {
          position = newPosition;
        });
      }
    });

    audioPlayer.onPlayerStateChanged.listen((state) {
      if (mounted) {
        setState(() {
          isPlaying = state == PlayerState.playing;
        });
      }
    });
  }

  Future<void> setAudioPlayer() async {
    final player = AudioCache(prefix: "assets/audios/");
    final url = await player.load("song.mp3");
    audioPlayer.setSourceUrl(url.path);
    audioPlayer.setReleaseMode(ReleaseMode.stop);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      decoration: BoxDecoration(
        color: const Color(0xFFF4F2FF),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(width: 1, color: Colors.grey)
      ),
      child: Column(
        children: [
          Slider(
            value: position.inMilliseconds.toDouble(),
            max: duration.inMilliseconds.toDouble(),
            onChanged: (value) {
              setState(() {
                position = Duration(milliseconds: value.toInt());
              });
              audioPlayer.seek(position);
            },
          ),
          GestureDetector(
            onTap: () async {
              isPlaying
                  ? await audioPlayer.pause()
                  : await audioPlayer.resume();
            },
            child: CircleAvatar(
              child: Icon(isPlaying ? Icons.pause : Icons.play_arrow),
            ),
          )
        ],
      ),
    );
  }
}

And here is how it looks like:

Now when I play a music file, and later tap on another item to play it, both of them plays at the same time, but I want the previous one to pause and only the current one to play. How can I achieve this behavior? Thanks in advance.

Answer 1

create the audio player in the parent class and pass it to the children. Then before you play stop the player and then play it with new url

widget.player.stop()

Use this to stop the player