How can I stop music and play another music instead of playing multiple sounds in a music player using Just_audio flutter package

Question

I am using just_audio flutter package to build a music player and when I play a song, the song starts playing and it takes me to a playing now page where I have my pause/play/etc. controls. If I try to play another song, I get two songs playing. I want the currently playing sound to stop when I click another song to play. I tried using audioCache, but it did not work because I cannot use just_audio and audioplayer packages together.

Here's my code

import 'dart:developer';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
import 'package:music_player/pages/playing_now.dart';
import 'package:on_audio_query/on_audio_query.dart';
import 'package:permission_handler/permission_handler.dart';

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

  @override
  State<AllSongsCopy> createState() => _AllSongsState();
}

class _AllSongsState extends State<AllSongsCopy> {
  final _audioQuery = OnAudioQuery();
  final AudioPlayer _audioPlayer = AudioPlayer();
  

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

  void requestPermission() {
    Permission.storage.request();
  }

  playSong(String? uri) {
    try {
      _audioPlayer.setAudioSource(AudioSource.uri(Uri.parse(uri!)));
      _audioPlayer.play();
    } on Exception {
      log("Error parsing song");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: FutureBuilder<List<SongModel>>(
            future: _audioQuery.querySongs(
              sortType: null,
              orderType: OrderType.ASC_OR_SMALLER,
              uriType: UriType.EXTERNAL,
              ignoreCase: true,
            ),
            builder: (context, item) {
              if (item.data == null) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
              if (item.data!.isEmpty) {
                return const Center(
                  child: Text("no songs"),
                );
              }
              return ListView.builder(
                itemCount: item.data!.length,
                itemBuilder: ((context, index) => ListTile(
                      leading: const CircleAvatar(
                          child: Icon(Icons.music_note_rounded)),

                      title: Text(item.data![index].displayNameWOExt),
                      subtitle: Text("${item.data![index].artist}"),
                      trailing: const Icon(Icons.more_horiz),
                      onTap: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => PlayingNow(
                                      songModel: item.data![index],
                                    )));
                      },
                    )),
              );
            }));
  }

  void requestStoragePermission() async {
    // only if the platform is not web, coz web has no need for permission
    if (!kIsWeb) {
      bool permissionStatus = await _audioQuery.permissionsStatus();
      if (!permissionStatus) {
        await _audioQuery.permissionsRequest();
      }

      // ensure build method is called
      setState(() {});
    }
  }
}

Answer 1

Try playing your song in the PlayingNow screen by parsing the audio source there, but instead of creating a new object of AudioPlayer() on the PlayingNow screen, pass the object that you created of AudioPlayer() on AllSongsCopy to the PlayingNow screen.