Playing two files in a row in JavaScript

Question

I can't get this right. So, I'm making a simple script that tells the current time. audiocontainer is an audio element, and the mp3play() function has been defned earlier. The idea is to do that:

[play hourXX.mp3] -> when it ends -> [play minutesXX.mp3] -> delete listener, therefore stop.

• The problem is:

Without the removeEventListener() function, the minuteXX.mp3 loops indefinitely ("It's 12 and 54 minutes... 54 minutes... 54 minutes...) because it keeps triggering the listener at the end.

With the removeEventListener() function the audio doesn't start at all. Do you have any idea why?

Or maybe is there any simpler way to play 2 mp3 in a row?

function telltime() {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();

audiocontainer.addEventListener('ended', function () {
mp3play('./time/minutes/minute'+m.toString()+'.mp3');

audiocontainer.removeEventListener('ended', function(), false); // stop!

}, true);

mp3play('./time/hours/hour'+h.toString()+'.mp3');

}

Answer 1

Since your problem is a bit "localized" (it doesn't work because of syntax errors), I've abstracted your question to allow me to provide an answer that is useful for others too.

How to play multiple mp3 files in a row

include this into your context:

var Mp3Queue = function(container, files) {
    var index = 1;
    if(!container || !container.tagName || container.tagName !== 'AUDIO')throw 'Invalid container';
    if(!files || !files.length)throw 'Invalid files array';        

    var playNext = function() {
        if(index < files.length) {
            container.src = files[index];
            index += 1;
        } else {
            container.removeEventListener('ended', playNext, false);
        }
    };

    container.addEventListener('ended', playNext);

    container.src = files[0];
};

use it like this:

//whatever is your audio element
var container = document.getElementById('container'); 

//play files in a row
new Mp3Queue(container, [
    'http://incompetech.com/music/royalty-free/mp3-royaltyfree/Sweeter%20Vermouth.mp3',
    'http://incompetech.com/music/royalty-free/mp3-royaltyfree/Happy%20Boy%20Theme.mp3'
]);

here is working example: http://jsfiddle.net/fYjLx/

In your specific case that would be:

function telltime() {
    var d = new Date();
    var h = d.getHours();
    var m = d.getMinutes();

    new Mp3Queue(container, [
        './time/hours/hour'+h.toString()+'.mp3',
        './time/minutes/minute'+m.toString()+'.mp3'
    ]);
}