Create a Music Discord Bot using Discord JS

today you will learn how to create a discord board just like rhythm or fredbo using discord js the music bot will have the following features playing a song from search you can also add songs using the url and will even cover playing playlists other than that the bot has the usual functions such as skipping the current song looking at the queue stopping pausing the current song zooming and of course exiting the channel so let's get started to get this project done we'll need to download a few things the very first thing that you'll want to download is ffnpeg which we'll use to actually play all the songs all of the links will be in the description so when you're on this page just go to whatever operating system you're on and download the binaries then if you're on windows go to the search and type in environment variables open that up click on environment variables and then select the path variable click on edit and make sure to add the place where you installed ffmpeg into your environment variables and you're after the bin folder and my bin folder looks something like this you should have ffmpeg ffplay and ff probe inside the bin folder next up we'll need a code editor in theory you can use any code editor you like but i like to use visual studio code i suggest you use it too because it's one of the best code editors out there just click the download link select the operating system that you're on and go for the default installation and lastly we'll need node.js download this again on the site you've got all the binaries here so it's a straightforward install just go for the defaults next up you'll want to head over to the discord developer portal and inside of here click on the applications tab we'll then click on new application and give our bot a name in our case it's just going to be named musicbot click create and in here you can customize a lot of things such as description if you're making the bot public you might want to give it tags so that people can search for it easier and you might want to give it an avatar for this step we'll just skip it because it's not really necessary since we're just testing things out so you want to head over to the bot section and in here click on add bot yes do it and then we'll need to save this token so click on the reset token yes do it inside of visual studio code we're going to create a n file that is going to store all of our environment variables we'll just say dot m the file has to be named dot end because that's how node recognizes the environment variable files and we'll say token equals and then paste the token you just copied from the developer portal right next up we'll want to define the client id so we'll say client id e-course go back to the developer portal and under oauth tab go to general and in here you can copy the client id right so that's it we've got all the environment variables set back to the developer portal under oauth2 and then url generator click on bot and application commands and lastly give it administrator privileges if you're creating this bot for production make sure to select only the things that you really need then copy the link that it generates open up a new tab and this is just like adding any other bot you select the channel that you want to add it to hit continue authorize and then confirm that you're not a bot when you're in the channel over here you can see that our bot is showing us offline that is fine for now because we haven't wrote any code now we can set up our coding environment inside of vs code hit control and then backtick in here we want to type in npm init now you can go for all these steps and put in whatever versions or descriptions that you want for the package i'll just give all the defaults just skip through all of this and this will generate a package.json the package.json will store all of our packages that we want to install if you're familiar with python this is similar to requirements.txt file that stores all of the dependencies and we'll need to install the following packages first of all we'll install discord.js so we'll say npmi discord.js then we'll say npmi dot n next we've got discord player then discord api types discord slash discord js slash voice slash rest opus and lastly discord.js slash builders now with all of the packages installed we're going to create the folder and the file structure click on new file and say index.js and we want to create a folder that stores all of our commands so we'll say commands and inside of here we'll define all of the command files we'll first say play.js then we'll have a command for pausing resuming showing the cue skipping the song exiting the voice channel that is it for our setup we can now finally get to the code so the first two files are actually going to be the longest one which is the index.js and the play.js let's start with the index.js which is our entry point we'll first want to import all of the environment variables they've got in the 0.10 file we'll say require dot end and what this does this loads all of the environment variables inside of the process.n and it will be something like token or client id inside of here [Applause] next up we'll want to require all of the discord.js libraries that we're going to be using we'll also need to require some node packages one for the file system and one for the path these are going to be used to load all of the commands from the commands folder now we'll need to create the client that is going to be our bot inside of discord.js you do this by saying cons clients equals new clients and in the object we want to give all of the intents that the bot is going to use it you could technically say intense dot all like this but this is not advised you don't want to just give it all intense just like you don't want to give it administrative privileges and we only need free intent so it's actually fairly simple to specify all the ones that we need so we'll sell flags dot guilds because we need access to the guilds to see all of the guilds that the bot is inside of we'll also want access to the messages and lastly we need access to the voice channel now let's get a list of all the commands in the commands folder i am going a little bit faster i understand that but if you want the full video of where i walk you through exactly how to set up your slash commands and go fully in depth with it there's going to be a link in the description and there should be a link showing up right now in the right hand corner let's load all the commands all right so just to quickly step over this the commands array is going to hold all of the commands in the commands file in a special format which is just plain old object which we're going to see in a moment and the client.commands is going to store it inside of the collection which gives us a little bit more access this is actually a wrapper around the map that is created by discord.js it just allows us to treat a map a bit like an array makes it a bit easier to work with so now we want to create the player used to play all the songs and to do this we use the library discord player that we've imported earlier on and this actually makes it really easy to work for the cues and all the playing of the music searching youtube and all of that so let's create that right now so we want to store it inside of our client object over here so that any command can access it very easily so also client dot player equals new player and then we want to give it some options because we want to have the highest quality audio now that we've got the player we want to actually register all of the slash commands with every single server again this is walked through more in the video that i'll link in the description so i'll just quickly glaze over this essentially what we do is we get the guild id that the bot is currently inside of and then we register all of the commands that we've loaded from the commands folder by using the rest api that we've imported earlier from disk or js and we use the token that we defined inside of our environment variables over here as well as the client id later on to register the commands now we need to actually execute the command whenever the user types it in essentially what we do here is if there's any type of interaction inside of our bot we want to first check if it's a command if it's not command we're just going to ignore and do nothing then remember how we push all of the commands with their name and the command to the client.commands well we use that down here and then we want to get the command name from the interaction this is why working with collections is so easy because we can just call get use the command name and we get the command back and then lastly we're going to execute the command passing in the client so that we have access to the player that we defined on the client object as well as the interaction so that we can send the replies back to the chat very last thing that we need to do is to actually log in our bot and we do that by saying client dot login and then lastly passing in our token and this is it for index.js the next big one we're going to cover is the play.js and i promise you this is going to be the last big file all the other ones are going to be like 20 lines long and very simple okay so that was quite a bit of right now but it's actually kind of simple what we're doing here so essentially we're defining the slash command builder and this is how you break it down first off what the user would type in here is a slash play and we give it a description of player songs so that whenever the user types in slash play they're going to get this helpful message at the bottom saying for example searches for a song that it plays and then we add sub commands for example we can say search and then the query which is going to be the search term that we're going to search for for example a song and this is what it looks like on discord so we can say play search and then it gives us the search terms and we can say song and that is what this ad option string does is it allows us to input some extra stuff into the command and we just repeat this for the playlist and we also repeat this for the song so i know it's a lot of code but actually it makes a lot of sense how it's structured and next up what we need to do is create our execute command if you recall in the index.json we actually call this with the client and the interaction and this is what is being passed into here and we've restructured the object that's been passed in very first thing that we want to do is we want to make sure that the user is inside of our voice channel so we can join in the voice channel and start playing the music if the user is not currently inside of the voice channel we'll just return a nice little message to them saying that they cannot play the command because they're not on the voice channel [Music] let's run through all the code that we just wrote first thing we do is we create the cue on the player that again we defined in our index.js on the player over here then we check if we are currently in a voice channel if we're not in the voice channel we want to connect to our voice channel and start our queue then we want to create an embed because we're going to be returning the embed with all the songs and everything to the user and we check if our sub command is song this is going to be the first sub command that we're going to create and we want to get the url of the sub command again if you recall when the user specifies the url over here some song over here we want to grab whatever the user's input is then do a search for it by using the search engine youtube video if there are no results returned then we want to just return straight back from the command and say no results found and if we found the result we want to add the song to the track and then return to the user the embed saying that the song has been added with the thumbnail of the song and the footer with the duration we're going to do something very similar for the playlists so i can actually just copy and paste this and we'll just say playlist the thing that changes in here is saying instead of youtube videos say playlist and we're going to say no playlist found we also want to replace this with playlist and we need to say add tracks instead of add track and instead of song we'll say playlist.title so lastly we've got the search for keyword sub command so it's going to be search and then we have inside of here the option of search terms so we'll say search terms and the query type this time is going to be auto again no results found and this is going to be back to song again and we just replace everything else with the keyword song right so we've got all of our sub commands sorted now what we can do is we can start playing the music and we do this by saying if we're not already playing something we want to start playing and lastly we'll just return the embed back to user with all of our information like the description the thumbnail and everything else those are the two most complicated files now we move on to the easy stuff we'll now quickly run over how you can implement the skip command we'll want to grab the very first two imports from our play command and again we'll do module.exports and we'll need to add the execute command inside of here we first need to grab the cue from the client object and we specify the guild that we are currently in if you've got the bot running on multiple servers you only want to get the cue of the one that this bot is currently on we want to check if there's anything currently in the queue because if there isn't we just say there's nothing currently in queue so we can't really skip anything and this is where this discord player library really comes into play because all we have to do to skip a song in the queue or pause the song or do anything with it we just call it a function we just say q dot skip q dot stop q don't resume and it's as simple as that next command that we're going to be doing is we're going to be doing the pause command and we can literally copy and paste all of that code replace all of the names like with fours so it pauses the current song we literally say set paused to true we're not going to return to them bed we're just going to say back saying actually we can get rid of this we're just going to go back saying that the current song has been paused we'll copy this over go into our resume command instead of saying set pause to true we'll just say set pause do false set name to resume as simple as that like i told you very quick and easy you've just got two more commands to go the next one up is the cue command this one is a little bit different to the skip and paw we can copy all apart from the set description all the way to the top over to our set command fortunately i've got github copilot installed so it literally gives me the suggestions for everything that i need it thinks that i'm trying to write the skip command again i'm not trying to do that that's a cute what this command is going to do is it's going to show the first 10 songs that are in our cue the very first thing we want to check for is if we've currently got a cue or if we're playing anything so this code might be a little bit confusing but essentially what we do is we go through all of the songs start in our cue and we're just going to take the first ten of them then we're gonna loop over each one of those songs and we're gonna return a string now this string is gonna look something like this first song we're gonna say one because the index of the first song is zero and we add one to it and then the duration of it is going to be inside of our brackets which might be like three minutes then we're going to put in our title of the song which might be the sign and then lastly who requested this song so in my case might be compute shorts and it's going to put all of the highlights in so when you click on it it's actually going to display the user profile this is why we've got the at sign and the less than and greater signs and then once it goes through the first song it's going to add the backslash n at the end because the map is going to actually return an array of all of these and then we're going to join with backslash n so it's just a way of formatting everything together we also want to display the current song where the user types in the queue command so we'll just get the current song and lastly we'll return the embed showing all of this information so we've got a bit of a long string here you might want to pause if you want to copy this over and we'll set the thumbnail for the current song and that is our q command done we've got just one more to go which is the exit command for this one we can actually copy over our pause code and instead of saying set paused we'll say dot destroy you can give a final message saying like why why are you kicking me out and the destroy function just gets rid of everything that's in the queue and then kicks the bot from the voice channel and we also want to make sure to set the correct names like exit that is everything that we actually need that is all the code now let's try to run it inside our terminal and see if we made any errors so we'll say node and then dot press enter and of course we get error but fortunately it's not too bad because it allows me to show you how you can debug your code so when we look further into this error message it says that there's something wrong on line 10 in our play.js command and we've got this sub-commando here and i realized what i did what i did wrong is we're actually supposed to return the option back to the add string so we can either say return over here or we can just get rid of the bracket and it's an implicit return and then we can get rid of the return statement so i need to get rid of that and we just need to do this for all of the sub commands now let's try to run this again we actually need to do the same thing for the sub commands we're making some progress we got a different error message now and here we can say it's something in the index.js i've realized what the error was it's saying that we've got an invalid form body and what we had in here when we were loading the commands we were just saying a command and that was just like a plain object that is not understandable for this chord so what we have to say is dot data and then to json and that is going to translate the slash command builder into json let's try to give that a go now and it says that it added commands to the client id so it's been successful if we go into here we see our music port is online so now we can try out our commands we'll say play search and then i don't know just say song error while executing the command and we get more errors saying it's something on line 44 of our play.js file what i can see in here we've definitely misspelled something we misspelt member so control save that and let's try it once more this is why i love coding especially when it's live you always get some stuff that's wrong and you definitely get spelling mistakes like i could see right here so this time it's on line 50. i'm just gonna have to go through all of my code and i'm not gonna bore you with all of this debugging because i just misspelled a bunch of words if you're having same sort of issues i am gonna have all of this code on github so you can download it straight away or if you don't even want to bother with code i'm going to create docker containers as well i finally got our bot to work and there was actually one more error that is probably worth mentioning if you get this error ffmpeg av con first of all make sure that you run a node at least for the latest version which is 16.15 or 18 or anything above it should work and if that doesn't fix the error try to install in the ffmpeg static package by saying npmi ffmpeg static by the way i got this off the internet by literally typing out the error that i got and then looking on stack overflow that's the game isn't it just copy and paste things or stack overflow and it should work so now when we do note dot all the commands have been added we can say play search and then search term like song it takes a little while but the music does get added to the queue and we can see that the music bot is playing i've muted the bot because i don't want to get copyright strikes and of course we can add more songs to it this time i'm going to use a url and type that in and we can see that also works and we can say slash q see everything that's currently in the queue you might want to reformat this to make it look a bit nicer i am going to reformat this before i upload it to github and we can also skip the current song we can pause you can see that it stopped playing and we can resume there we go and finally we can of course exit out of the voice channel and everything works fine if you enjoyed the video make sure to give it a like subscribe if you want to see other bots just leave it in the comments or if you want to see how to deploy this to aws to have your bot running 24 7. other than that i'll see you in the next one

Channel: Computeshorts

Views: 57,290

Keywords: discord music bot, discord bot, discord, discord js, discord js v13, music bot discord, discord js music bot, discord js music bot v13, discord js tutorial, discord js tutorial 2022, discord bot tutorial, music discord bot, how to make a discord bot, best discord bots, discord bot maker, music bot, rythm, ffmpeg, youtube_dl, debugging, discord song, discord music bot 2022, programming, coding, best discord music bots, discord music bot tutorial, discord music bots

Id: 3Iegimr8Qc0

Length: 19min 47sec (1187 seconds)

Published: Thu Jun 16 2022