Question

I have this Timer that is supposed to initiate various actions at 1 second intervals. It’s a pretty simple idea that simulates a 5 second countdown (literally). At the start, a JLabel is updated to set its text to “5”. Simultaneously, a little mp3 sound file plays that voices the number that the user sees on the screen. Then, one second later, the text is changed to “4” and a different mp3 plays that voices the number 4. And so on until we get to zero.

This all works, but I can’t get the visual updating to synchronize precisely with the audio part. The mp3 always seems to play just slightly before the screen is updated. At first, I thought that I just needed to put a little extra silence at the beginning of each mp3 on a trial and error basis until things synched up. But no matter how much silence I prepend to each mp3, I still hear the audio before the screen updates. All that changes is the lag between each “one second” update.

Anyway, here is the code that I am working with. Can anyone help me get this to synchronize? Maybe I need a second timer? I’m not sure how that would work. Thanks in advance!

class Countdown extends JFrame implements ActionListener {

    private Timer countdownTimer = new Timer(1000, this);
    int countdownSeconds;
    MyJFrame myFrame;

    public Countdown(MyJFrame thisFrame) {

        int countdownSeconds = 5;
        countdownTimer.start();
        myFrame = thisFrame;
    }

    @Override
    public void actionPerformed(ActionEvent e) {

            if (countdownSeconds == 0) {
                myFrame.updateCountdown(myFrame, "Go");
                SoundEffect.play("launch.mp3");
                countdownTimer.stop();
            } else {
                myFrame.updateCountdown(myFrame, Integer.toString(countdownSeconds));
                if (countdownSeconds == 5) {SoundEffect.play("five.mp3");}
                if (countdownSeconds == 4) {SoundEffect.play("four.mp3");}
                if (countdownSeconds == 3) {SoundEffect.play("three.mp3");}
                if (countdownSeconds == 2) {SoundEffect.play("two.mp3");}
                if (countdownSeconds == 1) {SoundEffect.play("one.mp3");}
                countdownSeconds--;
            }
        }
    }

public void updateCountdown(MyJFrame thisFrame, String numSec) {
    lblCountdown.setText(numSec);
}



import java.io.FileInputStream;
import javazoom.jl.player.Player;

public class SoundEffect {

    public static void play(String mp3File) {
        try {
            FileInputStream mp3_file = new FileInputStream(mp3File);
            Player mp3 = new Player(mp3_file);
            mp3.play();
        }
        catch(Exception e) {
            System.out.println(e);
        }
    }
}

Answer 1

I highly doubt you will ever be able to sync those perfectly, but I can explain why the current approach will not work.

Swing components must be updated on the Event Dispatch Thread, as you do with the Timer. When you update the text of the label, it will schedule a repaint on the Event Dispatch Thread. Note the word schedule, and not perform.

However, the Event Dispatch Thread is currently busy playing your sound, so the actual repaint operation will only occur after you called mp3.play().

Now you could (if allowed, not sure about the threading rules for playing MP3’s) try to play the mp3 on a different Thread (e.g. by using a secondary non-Swing timer). But since you never have full control over when the actual repaint is going to happen and only can control when the repaint is scheduled, the visual and auditive updates can still be out-of-sync.