Build An MP3 Player With Tkinter pt1 - Python Tkinter GUI Tutorial #87

what's going on guys John elder here from coding me common in this video we're gonna build an mp3 player with kinter and Python hi guys like I said in this video we're gonna build this mp3 player but before we get started if you like this video want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and check out code Meachem where I've dozens of courses with hundreds of videos that teach you to code use coupon code youtube won to get $30 off membership that's all my courses videos and books for one-time fee it just $49 which is insanely cheap okay in the last video I showed you how to do sounds and music with PI game and kinter in this video we're gonna expand on that and build this fun little mp3 player and you can see we've got a list of songs in here we can click play it'll play you can press forward goes forward back goes back I can pause it unpause it stop it we can't remove songs if we want we can delete one song or delete all the songs we can add a song we can add one song we can add many songs all at once and stuff like that we might expand this as we go on to put more features in there somebody asked put a slider underneath the shows like the location of the song that's being played at the moment we might do that later on but for now we'll start with this right here so just take a look at this real quick what we've got here is some buttons that I created and we know how to do buttons and image buttons from past videos I've also got this playlist here and this is just a list box a kinter list box and I've done a couple videos on list boxes in the past you check the playlist for those as well you know I just change the color and we'll look at how to do that you know these are menus we've done that before so a lot of the stuff in here is gonna be review of things we've done in the past so it's kind of fun and get to see actual examples of these things the only really different parts are the these buttons here like going forward going back pausing stopping playing things like that and also there's some little bit of Voodoo and adding the songs and removing the songs that might be fun too so this should be a fun one it's probably gonna take us a few days to go through all these things but let's get started so it is Friday here in Vegas very excited for the weekend once again and that should be good so got our basic starter code that we always have I'm using the sublime text editor and the get bash terminal as always and I've imported pygame now if you haven't pip installed this from the term go ahead and do that now just pip install pygame we did this in the last video so you can go back and watch that one link in the comment section below if you need help with that but okay what do we want to do here so well from the last video we know that right off the bat we need to do PI game mixture an it to turn on our mixer just so that we can use PI game with sounds and stuff so let's just comment this sort of say initialize PI game mixer whatever and we could just sort of ignore this for now so the first thing we really need to do is add that list box right so let's go create playlist box right so what should we call this I'm just gonna call this song box because I have no imagination basically what it is song box maybe you call it song list box or whatever doesn't really matter so this is gonna be a list box this is just a kinter widget list box right and we want to put this in route and now normally this would be enough but we want to change the color of this thing and give it some attributes so I want to change the background color BG to black I want to change the foreground color FG to green and now the foreground color is the text color so when we add things to this list they'll be the text will be green put any color you want but I like that green color on black background so that's cool and the default width is 20 now this is not really 20 pixels it's sort of just 20 list box sizes if you think of it like that right so I want to triple the size of this so let's just make this 60 so okay we've defined this guy so now we need to put it on the screen so let's go song underscore box dot pack and let's give this a pad Y of 20 so go ahead and save this I'm saving it as player dot pi if you want to see the code for this there should be a link in the comment section to my github repository so you can look at player dot PI it up to find it if you want so let's head over to get bash terminal and let's run Python player dot pi and when we do we see we've got this playlist box there's nothing going on in it right now but it looks pretty good and I'm pretty happy with the dimensions of that you can make it any size you want obviously okay so I'm gonna pull up a Windows Explorer here and I'm gonna my c GUI drive now if you've been watching these videos you know I have an images directory and our C GUI drive the GUI directory is where we save all of our Kenter code throughout this playlist and you can see I found some buttons here and I've called them play 50 stop 50 pause 50 forward 50 and back 50 because they're 50 pixels in size so I just named them 50 right and I found these on some free image website I don't even remember where you can search around in Google and find any kind of buttons you want these are just PNG files I've also created this audio directory that we talked about in the last video and I just put some mp3 songs in here now this will work with mp3 songs they'll work with wave WAV files and work with OGG files it's I think maybe Linux files or Mac files or I don't know but any of those music type files will work I downloaded these from there's a youtube song website where you get free music I just randomly downloaded some songs and I put them in this audio directory so the next thing we want to do is grab these buttons and put them on the screen so let's head back over to our code and let's create let's say create player control buttons alright and we need one to use before we like five of them right so I'm gonna call one back underscore button and I'm gonna call the another one forward underscore button and then I want to call the play button play button and then we need a pause button so let's call this pause button and then we need a stop button okay so when we create a button we just create a button but if we want to use images we've looked at this before first we need to define the image as a photo image so let's go photo image and the P and the I and image are capitalized and then the file is going to equal whatever file so remember I'm putting these I put them in the images directory and then I called the back button back 50 P&G now you could this is a relative path you could put the absolute path if you wanted to like that but since this player dot PI file that we're working on is saved in the GUI directory we don't have to do that we could just use the relative path so I'm just gonna copy this and kind of paste it in for all of these and then just switch these out so instead of back 50 this is forward 50 and this is play 50 and this one is you can guess pause 50 and this into stop 50 so say let's instead of calling us create let's call this define player control button images it's probably a better description so now we've got our images defined now we can create player control images or buttons now I want to put these I want to put these all next to each other in a straight line so I need to grid them but I want to pack everything else so it's easily centered on the screen so to do that let's create a frame here so let's go create player control frames and I'm not usually big on commenting but this is gonna be a little more complicated program so I want to make sure I put a lot of comments so the code is easily understandable so frame so okay so let's call this control frame or controls frame maybe and this is a frame and we want to put it in route now we can just go controls frame pack and let's give this a pad Y of well I probably don't have to give it a pad Y of anything really we could change that later if we want okay so now let's create our buttons so let's call this back underscore button different than back BTN right so maybe these are bad names maybe we would put back button image or something like that right just so it's makes more sense looking at it these are images so this is gonna be back button and then forward button and then play button and then pause button and then stop underscore button and while we're at it let's paste these in again and dot grid these boom-boom-boom okay so all right let's define these guys so this is a button and we don't want to put it in root we want to put it in control frame because we want to put it in that frame right and we want the image to equal something and remember when we make images out of buttons we we have to designate the border width to be zero otherwise they've got a box around them so let's go border width equals zero and let me just copy this and let's just paste this in for all of these okay so for our back button we're gonna use the back button image so we could paste this and as image and then for the forward button we want to copy this guy and then for the play button we want to copy this guy and the pause button we want to copy this guy this is kind of tedious but this is just always how you do it at the beginning before we are actually writing good code here okay so that looks good so now we want to grid these guys onto the screen and let's go row equals column equals and this is all gonna be in row zero so okay let's copy this I make this as quick as possible pase pase pase so this is gonna be column 0 column 1 column 2 column 3 and column 4 so let's go ahead and save this and see if we mess this up which is entirely possible cuz this Friday and all right all looking pretty good so these buttons are really scrunched together here maybe we want to give it a pad X of something to you know kind of move them apart a little bit right it's real close together so let's do that real quick let's go pad XO say 10 copy this paste paste paste and paste so go ahead and save this and let's run this again to see how that looked ok it looks pretty good alright you can play with the spacing of these if you want so alright so far so good we are moving right along so none of these buttons actually do anything yet but the first thing we want to do is add the ability to add a song in here so let's let's do that now and I want to put this up here in a menu just because I don't want to clutter up the screen here so step back over to our code and let's create menu and we've created menus a lot in the past in other videos so let's just just define this as my menu set that equal to a menu and we want to put it in root and then we want to go route config and then set the menu to my underscore menu and then let's add a song menu or add song menu something like that to add songs so let's go add underscore underscore song underscore menu and this is a menu and what menu is it it's in my underscore menu and then we can go my underscore menu dot add underscore cascade and let's give this a label and notice this is a lowercase L not a capital L it looks like a capital L sublime does that drives me crazy and so let's go add songs and then where do we want to do we want to put it on menu ad underscore song underscore menu which is this menu guy we just created right there okay so inside of add song menu we want to add a thing right so let's go dot add underscore command and we want to give this a label equal again lowercase L add one song to playlist and let's give this a command of add underscore song and we haven't created that add song function yet so let's come up here and define that let's go add song function so let's define it as add song and for now let's just say pass alright let's go ahead and save this and run it make sure that looks ok so we have this add songs menu if we click on it it says add one song to playlist when we do that nothing happens okay so what's video is getting long already and we haven't really done anything yet so let's try and at least get in the ability to add one song to the playlist in this video so let's head back over to our code and in our add song directory what do we want to do we want to create whenever we click on that we want a file dialog box to pop up that allows us to then search and find whatever song we want and add it to the playlist and we've done filed file dialog boxes lots of times in the past we have to first import that up here at the top so let's go from tkinter import file dialog I spell the right file dialog yep and then down here we could just create a variable and just call it gonna call it song because that's what we're doing here we're looking we're trying to find a song to add to the playlist so let's just call it song song and set that equal to file dialogue dot asked open filename right and now we can pass a bunch of different parameters in here the first thing we want to do is say what director do we want to look in initially that's the initial dir directory and we can set that equal to anything but I want to set it to audio a UTI oh and remember I showed you at the beginning this video I created a directory inside my GUI directory called audio where I've got all my songs right and this is a relative path you could always go see : GUI slash audio but again since this file this player dot PI file is already in the GUI directory we don't have to do that so okay so next we want to give this a title and let's give this a title of choose a song okay and then what file types do we want to sort of allow the program to import well I just want to make this an mp3 player so do a couple of brackets here and quotation marks and let's go mp3 files and then comma and then we need to designate what those file extensions are so we would go star dot mp3 now this is a tuple couple so we always put a comma right so that's this thing here even though we're only doing one thing we stuffed with the comma as if there was gonna be another thing here and you could do other things as well maybe WAV files or something but I think that's fine okay so that looks good so we can now let's say should say print song so let's save this and see if this worked let's run our guy again here come over here add songs add one song to playlist this opens we can pick a song not me we click open nothing happens here but when we close this it prints out the location of this song see GUI audio not me so very cool so now if we want we can add that to our list box so let's head back over here and instead of printing this to the screen let's just go song underscore box which is what we called our list box dot insert and we want to put this at the end of the list we always want to put the new song at the end of the list so that's end and then what do we want to put we want to put song so let's go ahead and save this and see if that worked so let's run this again and add songs it's picking not me and boom it shows up here now check this out when we click on this it says see : GUI audio not me now maybe we want to get rid of a si GUI audio and we just want the title itself on there so let's do that real quick and we can do that with just a little bit of Python so before we insert it into the box let's make a little bit of change some changes to it so song equals song dot replace and we can replace anything we want so let's replace that si forged slash GUI for slash audio with nothing okay so that will take off the si GUI audio but it won't take off the dot mp3 from the end of it so let's just copy this line again and paste it again and this time instead of replacing this with nothing we want to replace dot mp3 with nothing okay so let's give a little comment here strip out the directory info and mp3 extension from the song name I don't know okay and then here let's add song to list box okay so let's save this and run it make sure that worked and add songs and not me boom it shows up it's just not me there is a forward slash though so let's get rid of that as well it's right here boom okay that looks good so now let's save this and run it just to make sure that it worked again I'm sure it did but I want to show you something else as well so I had song not me well it looks like not me very cool so now check this out when we click on it we get this blue bar and the text turns white and I don't really like that color so let's go ahead and change that so we could do that really quickly in our list box let's see right here we have the attributes we we changed the color of the background to black and the text to green and we set the width to 50 we can also change other things in here as well we can say we could change the selection background so that's select background that's the color of that bar when you click on it so I want to change that to gray like a silver color we can also change the select foreground so select foreground equals Allen turn the text to blacks let's save this and see what that looks like alright we're on this guy come back over here add song me we click on it boom the bar turns gray and the text turns black I think that looks a lot better put any colors on there that you want though that's that's cool so okay we've got some pretty good stuff going on here this video is whoa getting pretty long but I think very quickly we can at least click the plate make the play button work so let's do that real quick so let's head over to our buttons and find our play button and here it is and let's give this a command equals play okay so now we just need to come up here and create that function so let's say play selected song so let's define play now we need a variable to so we know what song we want to play so what song do you want to play well whatever's being clicked on in the list box and how do we determine that well we just recall the active get of the list box so we can go song box so we called it dot get and what do we want to get whatever is active right that's the one that's been clicked it's highlighted it's gray it's got the gray bar on it so now remember the thing in the box has had this stuff stripped off of it right but we need that stuff in order to actually play us we need to add that stuff back in so let's go song equals let's just use an F string and we can just add in C /gu e /aa do forward slash and then pass in whatever our song is and then also put in a bit back of it mp3 so this will sort of reconstruct that directory string the way it was before so now we can just go PI game dot mixer dot music dot load and we want to load song and then we want to go PI game dot mixer dot music dot play and then let's give this a loops of 0 and again this is a lowercase L and we learned how to do these two things in the last video is how we play songs right hopefully that will work let's save this and run it give it one more try here so it's an a song not me it shows up we click on it press play all right and that works now our stop button doesn't work we can play click the play button a bunch of times let's do the stop button real quick why not I should just take a second head back over to our code come down here to our buttons here's our stop button let's give this a command of stop now let's come up here and create a new function [Music] stop playing current song and it's defined stop and this is just pi game actually let's just copy this whole line by game that music dot pi game mixer music dot stop and we don't have to pass it anything at all now we can also sort of clear the list box if we want so let's go song box name cracks me up for some reason dot selection underscore clear and then we want a clear active active is the thing that's been clicked right so what this will do is unclick it basically so let's save this and run it and add song let me click on it now that's active right we click play we click stop it stops playing and it's no longer selected right so okay looking good and boy this video got long quick and we've got a lot more stuff to do on this so this is gonna definitely take two or three or maybe four days to get through all this but I think for now we'll stop Inc we got a pretty good start at least it looks good it's not completely functional but we can play one song and we can stop one song so I think we did pretty good for the day it's Friday anyway come on so that's all for this video if you like to be sure to smash the like button below subscribe to that channel give me a thumbs up for the YouTube algorithm which really helps out the channel I really appreciate it guys and check out coding be calm or you can use coupon code youtube wanted to get $30 off membership they pay just $49 to access all my courses over forty five courses hundreds of videos and the PDS of all and best on coding books joint over a hundred thousand students learn to code like you my name is John elder from Cody me common we'll see in the next video

Channel: Codemy.com

Views: 47,586

Keywords: tkinter mp3 player, python tkinter mp3, build an mp3 player from scratch, build an mp3 player tkinter, python mp3 player gui, python mp3 player code, mp3 player using python, mp3 player python project, tkinter songs, tkinter sounds, tkinter gui mp3, playing music with tkinter, playing music with python, tkinter music player, python tkinter music player, python tkinter music player tutorial, tkinter mp3 tutorial, python tkinter mp3 tutorial, python music player

Id: 88IJCBKlAPA

Length: 24min 55sec (1495 seconds)

Published: Fri Jun 26 2020