How To Make Queue System - Discord.js

Question

I am working on a music and I would like to know how to add a queue system to the command; I have been looking around for hours and not been able to find anything on it,

If anyone can help that would be great and I don't need a queue command but I do need to add a queue system so it would really help I will be checking back in an hour to see if anyone has given me or an idea or the answer to my problem

This is my code so far:

const Discord = require('discord.js'); 
const ytdl = require('ytdl-core'); 
const YoutubeSearcher = new QuickYtSearch({ 
    YtApiKey: '', 
});
module.exports={
    name: 'play',
    category: 'music',
    description: 'Joins and plays the song',
    aliases: ['p'],
    usage: '.play <song name or URL>',
    run: async(client, message, args)=>{
    try{
        
    if (message.member.voice.channel) { 
            let args = message.content.split(' ').slice(1).join(' '); 
            if (!args) { 
        const error = new Discord.MessageEmbed()
          .setTitle(`🔴 Looks like there is an Issue!`)
          .setColor(0x2f3136)
          .setDescription(`You have to provide me at least, the name or the url.\n\nExample :
            \`\`\`fix
.play <url>
OR
.play <name>\`\`\``)
        return message.channel.send(error);
            };
            message.member.voice.channel.join() 
                .then(connection => {
                    if (YoutubeSearcher.isVideoUrl(args) === false) { 
                        YoutubeSearcher.getVideo(args).then(video => { 
                            const volume = { volume: 10 }; 
                            const dispatcher = connection.play(ytdl(video.url, { filter: 'audioonly' }, volume)); 

                        const play1 = new Discord.MessageEmbed()
                        .setTitle('Song info')
                        .setURL(video.url)
                        .setDescription(`Name: ${video.title}, By: ${video.channelTitle}`)
                        .setThumbnail(video.highThumbnail)

                            message.channel.send(play1); 
                            dispatcher.on("finish", () => { 
                                dispatcher.end(); 
                                message.reply('End of the song.');
                                message.member.guild.me.voice.channel.leave(); 
                            });
                        });
                    } else {
                        const volume = { volume: 10 }; 
                        const dispatcher = connection.play(ytdl(args, { filter: 'audioonly' }, volume));
                       message.reply('Now playing ' + args);
                        dispatcher.on("finish", () => { 
                            dispatcher.end();
                            message.reply('End of the song.')
                            message.member.guild.me.voice.channel.leave();
                        });
                    };
                });
        } else {
            message.reply('You need to join a voice channel.');
        };

     }catch(err) {
        console.log(err)
        return message.channel.send(`Error: ${err.message}`)
      }
   }
}

Answer 1

In theory you could use the queue data structure (the last element is taken out and when a new one is added it is added to the start) and in the queue hold the music that is requested to be played. This is how it might roughly look like:

client.on("message", (msg) => {
var arrOfMusic = [];
if(msg.content.startsWith("!queue")){
msg.channel.send(arrOfMusic.join(" , ")

}
if(msg.content.startsWith("!play")){
arrOfMusic.push(msg.content.slice(6))
// you don't need to play the music
}
// your code to play the end of the array all you do is play the last element you also  //need to check once it is over and use pop to remove last element
if(msg.content.startsWith("clear")){
arrOfMusic = []
}
})