JavaFX mp3 music player 🎵

hey what's going on everybody it's you bro hope you're doing well and in this video i'm going to explain now we can make a simple mp3 player using javafx so sit back relax and enjoy the show we're gonna build an mp3 player today so pick a pane of your choosing i'm going to use an anchor pane because they're fairly simple to use and this doesn't need to be so tall that's not too bad okay let's give this pain a unique id for the id let's just say a pane now let's add a label to hold the name of the current song labels are found underneath controls just drag and drop one place it near the top let me increase the font size pick whatever font size that you want maybe a little bit bigger that's not too bad okay then let me expand this and i'm going to center it so go to alignment then center and let's give this label a unique id let's say that this is song label then let's add a progress bar directly underneath so that is found underneath controls progress bar let's place it underneath our label and expand it and this will be song progress bar and we'll need a bunch of buttons for controls that is also found underneath controls let's begin with a play button let's expand it i'll increase the font size too and change text to play let's copy this and paste it the next button will be pause we'll link some methods later on then we have reset to reset the song previous to go to the previous song let me decrease the font size that's good then next to go to the next song okay we'll need a drop down menu of some sort preferably a combo box to change the speed of the song that it's playing okay for the prompt text let's say speed then a volume slider let's use a horizontal slider i think i'm going to expand this a little bit just so we can fit that slider in this combo box of speed i'm just going to give a unique id of speed box or speed combo box works too i suppose and this volume slider let's give an id of volume slider i think i'm going to expand the size of this label so let me drag and drop the buttons down same thing goes with the combo box and our slider and the progress bar and let me increase the size of this label and increase the font size too that's pretty good and i'll change the text let's say mp3 player now what we'll do at this point is give each button a unique id and link a method using on action so let's begin with the play button play button on action play media then go to pause pause button on action pause media reset button reset media okay previous button previous button on action previous media the next button next button next media our combo box we have an idea of speed box on action change speed our volume slider doesn't have a on action section so we're going to add a change listener to that within the initialize method let's just make sure that we have a unique id of volume slider same thing goes with our progress bar song progress bar our label is named song label okay there's a few things that we need to do within our volume slider so click on your volume slider underneath properties let's keep min at zero so zero will be muted basically max will be 200 so we can increase the sound of our music the volume to 200 percent the default will be 100 so let's change value to 100 and that should be it for our volume slider you can also change the color scheme of your nodes by using a css style property so click on a node of your choosing let's change the background color of our pane so i'm going to click on my anchor pin then go to properties then underneath style i can add a css property of my choosing so if i would like black i can type in the word black or i can use a hex value so let's say six twos now we can do something similar with the label and then go to text fill and change the color here so that's another option too and we are done building the layout of our mp3 player let's make sure that our controller class is linked save and then head to our controller class before we forget we should refresh our project so i'm going to go to my project folder and click refresh so in order for this program to run we need to declare all of those different methods that are linked to each button so they can be found within your fxml file then you can see anything underlined in red we'll need to declare as a method so let's head to our controller class and the first method that we'll declare is our initialize method but we need to implement the initialized interface then hover over controller add any unimplemented methods after our initialize method we're going to declare our play media method public void play media followed by pause media let me copy this paste it let's change play to pause media then we have reset media previous media next media change speed and there will be one parameter of action event event action event event we'll also be implementing a timer so let's create a method named begin timer as well as cancel timer okay we should at least be able to run this now so if you need some music to work with you can always head to youtube's audio library and find a couple songs that you like and then there should be a download link underneath each video so find maybe three songs that you like and then we can move on to make my music easy to find within my project folder i'm going to create a new folder and i'm going to name this music then finish so i have a music folder within my project folder find the mp3 files that you downloaded i'm going to copy them go to my music folder and then paste them so we should have a couple mp3 files within our music folder preceding our initialize method we're going to declare everything that we'll need throughout this program so we'll use some xml injection for our pin private pin pane at fxml private label song label then we have a bunch of buttons private button play button followed by pause button reset button previous button then next button at fxml private combo box this is for our speed we're going to list a generic type of string speed box at fxml private slider volume slider at fxml private progress bar song progress bar we're going to create a file to hold our directory of music private file directory as well as an array of files so that would be private file array files and an array list of files private array list will list a generic type of file and this will be named songs this is kind of like our playlist private int song number to keep track of what number song we're on now we'll need some speeds for our speed combo box so that will be an array of integers private int array speeds and list a bunch of different speeds that you want so think of this as in percent so let's say we have 25 50 75 100 will be the default 125 150 175 and 200 we'll need a timer private timer timer basically the timer is going to keep track of our progress bar and update it every second or so so private timer timer followed by private timer task task and lastly private boolean running we will set this to true or false depending if our player is currently playing a song or not okay it's time to fill in our initialize method so the first thing that we're going to do is initialize our array list of songs this will function as a playlist as well as our directory so within our initialize method take songs equals new array list list engineer type of file and we are going to set our directory equal to new file and pass in the name of this folder music okay so we will take our array of files which is up here and set this equal to directory dot list files so a quick summary about this method is that this method list files will get all of the different files within our directory so if we have three songs in here it's going to store all of these songs within this collection of files so it's going to continue until there's no more so let's check to see if files does not equal no if it does not equal null then we'll create a for each loop for file file in our array of files we will take songs that's our arraylist dot add file just to test this i'm going to system.out.printline each file just so that we know that it's working fine okay not bad okay so i forgot to declare a media and media player object so let's take care of that because i forgot private media media then private media player media player now within our initialize method after our if statement we're going to finish instantiating our media as well as our media player object media equals new media and pass in songs dot get and our index our index is going to be our song number so in the beginning it's going to be zero the beginning of our playlist followed by dot to uri followed by to string then we're going to load our media player with our media object so media player equals new media player then pass in your media object now i'm going to change the text of our song label to reflect the name of the current song that is playing well the initial song that is playing at least song label dot set text and we need to pass in a string so to get the name of the current song type our arraylist of songs songs.get and our index is our song number initially it's going to be zero followed by dot get and let's test this so the first song in my playlist is block party so my song label should be updated with that name blockparty.mp3 we'll be returning to our initialize method a little bit later on let's fill in our play media method just to test it so take media player dot play there so when i click on our play button it should play our song not too bad not too bad let's work on pause next so within our pause media method take our media player and use the pause method let's try it again we can play [Music] and we can pause all right within reset media all we have to type is media player dot seek and we have to pass in a duration our duration is going to be seconds 0.0 i guess just zero works due okay let's try the reset button okay play [Music] nice let's fill in our next media method to change to the next song so we'll need to check the current song number if song number is less than our songs dot size minus one then we will move to the next song so we will increment our song number by one song number plus plus this is our index and we will take our media player and use the stop method and we will play it later on and we will load our media with a new file media actually we can copy this part so copy media and a media player these two lines as well as our song label too i suppose let's copy all of those lines and within our if statement within the next media method let's paste these so what would happen if we reached the end of our playlist so let's take a look so i'm just going to hit next next and we can't move past the last song so we would like to go back to the beginning of the playlist so that will be our else statement else let's copy all of this code but we're going to make one change set song number equal to zero so i should be able to cycle through my playlist using the next button so i'm beginning with block party here followed by level up 12 speed then back to block party and let's play these just to be sure that it's working so we have block party level up then 12 speed so if you want these songs to automatically play after hitting the next button you can just add this line we just have to call our play media method at the end so at the end of our if statement play media if you want the song to play automatically after hitting next and add that to your else statement as well so these should play automatically after hitting the next button but you can keep out this feature if you want now let's fill in our previous media method so we can move backwards through our playlist and honestly we just need to copy everything within our next media method and make just three small changes so let's copy all of this then paste it then within our if statement change if song number is greater than zero take our song number and decrement it then change within our else statement song number equals songs dot size method minus one so we should be able to cycle backwards through our playlist now let's try it so i have block party to begin now our next task is to work on our speed box to change the speed of the song that is currently playing currently there's no values so within our initialize method head to the bottom and add these lines of code we'll create a for loop int i equals zero we will continue this for loop as long as i is less than speeds dot length speeds is our array that we initialized in the beginning then increment i by one and after each iteration of this for loop we will take our speed box dot get items then use the add method and pass in a string the string that we're going to pass in is integer dot 2 string our array of speeds at index of i so this should populate our speed box our combo box so we have speeds 25 through 200 or whatever speeds that you filled in within this array in the beginning this part isn't necessary but i'm going to add plus percent after each of my speeds just so that it's easier to understand so i have speeds 25 through 200 after our for loop we're going to create a reference to our change speed method down at the bottom here so at the end of our initialize method we will take our speed box dot set on action then within the set on action method take this colon colon so we're making a reference to our change speed method then let's fill in our change speed method near the bottom to change the speed of our media player we're going to change the rate media player dot set rate and pass in a double integer dot parse int speed box dot get value then multiply this by 0.01 now one issue with our speed box is that we added this percent sign to the end of each value and since we're getting the value then multiplying it by 0.01 we're not going to get the intended results so just to test this i'm going to remove this percent sign then there's one change we're going to make right after so let's play and then change the speed so we have 125 [Music] now if you were to keep this percent sign in and append each speed value with a percent at the end this is going to be the result we'll just run into an error really let me change the speed all right so we need to account for this percent sign and one easy way to do that is to create a substring so let me turn this line into a comment so here's the change that we're gonna make after get value we'll create a substring dot sub string we need a beginning and ending index zero comma speed box dot get value followed by dot length method minus one so this should work now so we have all of our speeds plus their percentages and we can change the speed that's real slapper right there [Music] now there's one issue if i were to change the speed of a song it's not going to be retained when we move to the next song here's an example so this first song of mine will play at 200 percent but then if i switch songs it's not going to be at 200 it's going to be the default of 100 even though our speed box says 200 here's an example so these other songs were playing at 100 so after we change songs let's call our change speed method i think the easiest way to do this would be to head to our play media method and before we actually play our media let's change the speed so change speed okay so we need to pass in an argument because there's a parameter of action event event but we can just pass in null okay let's try it so i'm first going to change the speed and then switch songs [Music] okay now check this out what if i was to change songs without changing the volume first so we'll run into an error the reason that this is happening if i were to change songs without changing the speed first is because with our speed combo box if we do not initially select a speed this will have a default value of null and then when we do change our speed what we're doing is that we're taking our speed multiplying it by 0.01 we're basically multiplying null times 0.01 so let's check to see if our value of our speed box is equal to null before changing the speed so within our change speed method let's check to see if our speed box is equal to null if speed box dot get value is equal to null then we will set a default rate media player dot set rate and let's set this to 1. else we can change the speed normally to whatever the speed box value is and let's try it so we should be able to cycle through our songs now we have our volume slider to work on to change the volume of our song that is playing we'll add an anonymous change listener to our volume slider at the end of our initialize method so head to the end of your initialize method and we will take our volume slider dot value property method dot add listener and we're going to pass in an anonymous change listener new change listener then we will add a generic of number then add a set of parentheses then curly braces so be sure to add any unimplemented methods so when you adjust the knob on your volume listener you're going to call this method of changed so what we'll do is take our media player dot set volume and pass in a double and the double that we're going to pass in is the current value of our slider volume slider dot get value method and since we're working on a scale between 0 and 200 let's multiply all of this by 0.01 so this should work now [Music] if you go all the way to the left you can actually mute it hold on we need to fix something i'm going to change the max to 100 and let's set the initial value to 50 and this is within our fxml file so let's save this and try it again because when i was increasing the volume past the mid mark it wasn't actually going up [Music] now our last mission is to work on our progress bar so after about every second let's update the progress of our progress bar to reflect how much of our song is complete and then once our song is complete our progress bar should be at one hundred percent so let's head to our begin timer method and create a new timer now we've already declared our timer we just need to instantiate it timer equals new timer let's instantiate our task task equals new timer task and there's some code that we have to write in here later and we will take our timer dot schedule at fixed rate and we pass in a timer task a delay and a period or interval time to repeat our task so we have our task let's set our delay to 1 000 milliseconds so one second and we will repeat this every 1000 milliseconds okay within our timer task within these curly braces let's declare a run method public void run let's take our boolean variable of running and set the sql to true because this is now running and we will create a double value named current and set the sequel to the current time of our song that is elapsed media player dot get current time and this will return a duration object so we need to convert this to seconds so follow this with the two seconds method now we need to get the ending time of our song we can declare another double value named end well variable and equals media get duration this returns a duration object and convert this to seconds and just to test it i'm going to system.out.printline current divided by end then let's take our song bar and use the set progress method and pass in current divided by end now once our song finishes we should cancel our timer so that it's no longer running so at the end of our run method let's check to see if current divided by end is equal to one if this is true then we will call the cancel timer method found near the bottom of our program and within our cancel timer method we will set running equal to false timer dot cancel now there are a few places in which we're going to call the begin timer as well as the cancel timer methods let's begin with the play media method and the first line will be begin timer then within our pause media method let's cancel timer when we click on our reset button we're going to reset our progress bar song progress bar dot set progress pass in zero then within our previous media method after we stop our media player let's check to see if running is set to true if running then we will cancel our timer cancel timer method copy our if statement and place this in the same area within our else statement underneath the previous media method so i'm going to paste this right here then head to next media underneath media player dot stop cancel the current timer within an if statement if running and place that here as well within our else statement all right let's test this now so you can see our progress bar is filling with progress [Music] now you technically don't need this print line statement i was just checking on the percent that our progress bar was filled you can always multiply that by 100 and formatted two to get a percentage okay this is how to change the color of a progress bar the meter that fills up because normally the default is blue so let's add this to our initialize method near the bottom so that would be right here so take song progress bar dot set style and we can add a css property as a string so that would be dash fx dash accent colon space you can add a color name or a hex value so let's say that i would like green to match that would be 0 0 ff 0 0 then semicolon so my progress bar should be green now yep it's green [Music] now i'm just going to go over a few bug fixes that i noticed so i'm going to change the delay of my timer to zero because if the progress bar is filled with you know some amount of progress then we switch songs well it still displays that partially filled progress bar for like a second so let's change this to zero one other bug that i noticed that we should fix if i was to change the volume let's say we mute it and then switch songs it'll still play at the normal volume so let's take this line of code media player dot set volume and when we play media let's also change the volume to reflect whatever our volume slider is so that should fix that bug okay yeah you can see that it's all muted now also when we close out of our application using this x button in the corner we're going to do so gracefully using the main java file so when we click on this x button we're going to call automatically the set on close request method of a stage so type the name of your stage minus stage dot set on close request and we're going to pass in an anonymous event handler new event handler and add a generic type of window event parentheses curly braces add any unimplemented methods so we should have a handle method within our anonymous event handler platform dot exit method followed by system dot exit pass in a status of zero so if there's any sort of cleanup that you need to do before a user closes out of your stage you can write that code within the handle method of an anonymous event handler well everybody that is a simple mp3 player using javafx if you would like a copy of all this code i will post all of this to the comments section down below don't be afraid to smash that like button drop a random comment down below and subscribe if you'd like to become a fellow

Channel: Bro Code

Views: 10,120

Keywords: javafx, javafx music, music javafx, javafx mp3, mp3 javafx, java mp3, mp3 java, javafx music player, music player javafx, java music player, music player java, java mp3 player, mp3 player java

Id: -D2OIekCKes

Length: 36min 40sec (2200 seconds)

Published: Sat Mar 13 2021