Trouble Implementing Playlist with AudioPlayer

[DevFenrils]

Hello, I am using your plugin to create a playlist of songs that play when clicked like a button.
But I have a problem: when I create each song with AudioPlayer.create, there doesn't seem to be any issue, and when I click the button for the first song, it plays. The problem occurs when I click any other button for another song, and I get the following error:

The issue is that I don't understand the order of the plugin's logic. I'm attaching my code. Thank you.

import React, { useEffect, useState } from 'react';
import { AudioPlayer } from '@mediagrid/capacitor-native-audio';
import { IonCard, IonThumbnail, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonIcon } from '@ionic/react';
import './APlayerComponent.css';

interface AudioPlayerProps {
    songs: Array<{ title: string; artist: string; url: string, imageUrl: string; }>;
}

const APlayer: React.FC<AudioPlayerProps> = ({ songs }) => {

    const init = async (song: any, index: number) => {
        const audioId = `song${index}`;
        const bgAudioId = `bgsong${index}`;
        await AudioPlayer.create({
            audioId: audioId,
            audioSource: song.url,
            friendlyTitle: 'My Test Audio',
            useForNotification: true,
            artworkSource: '',
            isBackgroundMusic: false,
            loop: false,
        }).then(async () => {
            await AudioPlayer.initialize({ audioId: audioId }).catch(ex => console.log(ex));

        }).catch(ex => console.log(ex));

        await AudioPlayer.create({
            audioId: bgAudioId,
            audioSource: song.url,
            friendlyTitle: '',
            useForNotification: false,
            isBackgroundMusic: true,
            loop: true,
        }).then(async () => {
            await AudioPlayer.initialize({ audioId: bgAudioId }).catch(ex => console.log(ex));

        }).catch(ex => console.log(ex));


        AudioPlayer.onAudioEnd({ audioId: audioId }, async () => {
            AudioPlayer.stop({ audioId: bgAudioId });
        });

        AudioPlayer.onPlaybackStatusChange({ audioId: audioId }, result => {

            switch (result.status) {
                case 'playing':
                    AudioPlayer.setVolume({ audioId: bgAudioId, volume: 0.5 });
                    AudioPlayer.play({ audioId: bgAudioId });
                    break;
                case 'paused':
                    AudioPlayer.pause({ audioId: bgAudioId });
                    break;
                case 'stopped':
                    AudioPlayer.stop({ audioId: bgAudioId });
                    break;
                default:
                    AudioPlayer.stop({ audioId: bgAudioId });
                    break;
            }
        });

    }

    const playSong = async (index: number) => {
        await AudioPlayer.play({ audioId: `song${index}` });
    };

    useEffect(() => {
        songs.forEach((song, index) => {
            init(song, index);
        });

      }, []);
    
    return (
        <div>
            <ul>
                {songs.map((song, index) => (
                    <IonCard>
                        <IonCardContent key={index} onClick={() => playSong(index)}>
                            <div className='card-content-playlist-item'>
                                <div className='card-image-playlist-item'>
                                    <img src={song.imageUrl} alt={song.title} />
                                </div>
                                <div className='card-playlist-item'>
                                    <h2>{song.title}</h2>
                                    <p>{song.artist}</p>
                                </div>
                            </div>
                        </IonCardContent>
                    </IonCard>
                ))}
            </ul>
        </div>
    );
};

export default APlayer;

[wsamoht]

Thanks for trying out the plugin. You are probably getting an error when you are creating each song in the playlist as you can only have one audio file registered at at time with useForNotification = true. So when you go to play a second song, it is erroring because the create failed for it and thus throwing the error that it cannot be found when trying to play.

Unfortunately the plugin wasn't designed with playlists in mind. A workaround for now would be to only create two audio sources, one for a playlist item and one for the background audio. Then use the changeAudioSource and changeMetadata methods to update the source as you click between the playlist items. A problem you will run into is that it won't auto play the next playlist item when the app is in the background (assuming you handle this with JS while the app is in the foreground) as JS execution gets paused after a certain amount of time (at least on Android) when the app is in the background.

Supporting a playlist would require some design changes (would use native playlist functionality) and is currently out of scope of what we want to offer at this time. We'd be open to working on it if someone wants to fund the dev time to do it 😀 Someone else was trying to do a playlist over here too - #7.