We accordingly define a new method named create_console_frame in our GUI class, which holds our image, clock text, and currently playing text for creating the top console and progress bar as follows(see code 5.04 GUI.py):

def create_console_frame(self):
   consoleframe = Frame(self.root)
   self.canvas = Canvas(consoleframe, width=370, height=90)
   self.canvas.grid(row=1)
   photo = PhotoImage(file='../icons/glassframe.gif')
   self.canvas.image = photo
   self.console = self.canvas.create_image(0, 10, anchor=NW, image=photo)
   self.clock = self.canvas.create_text(32, 34, anchor=W, fill='#CBE4F6', font="DS-Digital 20", text="00:00")
   self.songname = self.canvas.create_text(115, 37, anchor=W, fill='#9CEDAC', font="Verdana 10", text='"Currently playing: none [00.00] "')
   self.progressBar = ttk.Progressbar(consoleframe, length =1, mode="determinate")
   self.progressBar.grid(row=2, columnspan=10, sticky='ew', padx=5)
   consoleframe.grid(row=1, pady=1, padx=0)

The description of the code is listed as follows:

The contents of the display panel and the progress on the progress bar need to be updated every time a new song starts playing. In our current code, a new song starts playing when a user clicks on the Play button or double-clicks on a particular track, or when the Next or Previous button is clicked.

Before we update the clock or the progress bar, we need to know two things:

Fortunately, pyglet provides API calls to determine both these things. As per its documentation, the total length of a song currently playing can be obtained from the code: source.duration.

Similarly, the current duration of play can be obtained using myplayer.time.

Let's, therefore, define two new methods in our Player class to get the value of these two variables, as follows (code 5.04player.py):

def song_len(self):
   try:
     self.song_length = self.source.duration
   except:
     self.song_length = 0
   return self.song_length
def current_time(self):
   try:
     current_time = self.myplayer.time
   except:
     current_time = 0
   return current_time

Now, we slightly modify our start_play_thread method to call our song_len method so that our song_length attribute is updated with the value of the song length.

def start_play_thread(self):
   player_thread = Thread(target=self.play_media)
   player_thread.start()
   time.sleep(1)
   self.song_len()

Notice that we made the method to sleep for one second, so as to enable to length metadata to populate. If we do not make it sleep for a second, the code would execute so fast that it would end even before the song_length variable is updated by pyglet.


Now, we have access to the total length and current duration of play. We now want to update the current track every time a new track is played.

A new track is played when a user hits the Play button, or when he or she double-clicks a particular song, or when he or she clicks the Next or Previous button.

If you look at the code from previous iteration (code 5.03 GUI.py), all these methods call the self.player.start_play_thread()functionality to start the playback. However, now we need to update the console display every time a new player thread is started.

We, therefore, need to refactor our code. For one, we will route all calls to player.start_play_thread()through a single method, which will update the display as the player thread starts.

We, therefore, define a new method named launch_play, and replace all instances of player.start_play_thread()from previous code to now call our launch_play method, as follows (see Code 5.04.py main-gui.py):

def launch_play(self):
   try:
     self.player.pause()
   except:
     pass
   self.player.start_play_thread()
   song_lenminute = str(int(self.player.song_length/60))
   song_lenseconds = str (int(self.player.song_length%60))
   filename = self.currentTrack.split('/')[-1] + '
 ['+ song_lenminute+':'+song_lenseconds+']'
   self.canvas.itemconfig(self.songname, text=filename)
   self.progressBar["maximum"]=self.player.song_length
   self.update_clock_and_progressbar()

The description of the code is listed as follows:

In this step, we will learn to update timer clock and progress bar at regular intervals. Although song name and song length are to be updated just once for a given song, the play duration and progress bar need to be updated at small intervals. We, therefore, handle it in a separate method named update_clock_and_progressbar().

We want to display time in the format you normally find in a digital clock. We accordingly define a string format named timepattern, as follows:

timepattern = '{0:02d}:{1:02d}'.

Now, let us turn our attention to updating the display clock and the progress bar. We have already made a call to update_clock_and_progressbar()which is supposed to take care of this work. Let's now code this method, as follows(see Code 5.04.py main-gui.py):

def update_clock_and_progressbar(self):
   current_time = self.player.current_time()
   song_len = (self.player.song_len())
   currtimeminutes = int(current_time/60)
   currtimeseconds = int(current_time%60)
   currtimestrng = self.timepattern.format(currtimeminutes, currtimeseconds)
   self.canvas.itemconfig(self.clock, text= currtimestrng)
   self.progressBar["value"] = current_time
   self.root.update()
   if current_time == song_len: #track is over
     self.canvas.itemconfig(self.clock, text= '00:00')
     self.timer=[0,0]
     self.progressBar["value"] = 0
   else:
     self.canvas.after(1000, self.update_clock_and_progressbar)

This code runs itself every 1000 ms, forces a root update, and changes the time and progress bar value. To keep running regularly, it calls back itself after every 1000 ms.

When a track is over, it resets the values of clock and progress bar to zero, and exits out of the update loop.