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');

}

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');

}

• javascript
• html5-audio
• playlist
• event-listener

• there is a syntax error on that line. That's why. function() without anything else isn't valid (and actually doesn't make any sense) – Roman Commented Jun 4, 2013 at 11:54
• Just for the record, here's my logic (maybe someone else will learn from the mistake): From what I knew, if you wanted to destroy the EventListener, you needed to refer to it the same way it was created. So I needed to place the name of the function inside removeEventListener as well. Since I created the Listener with a nested nameless function (which worked without problems), I figured I'd refer to it just by the same "name" - function(). – darekm Commented Jun 4, 2013 at 14:08

1 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://inpetech./music/royalty-free/mp3-royaltyfree/Sweeter%20Vermouth.mp3',
    'http://inpetech./music/royalty-free/mp3-royaltyfree/Happy%20Boy%20Theme.mp3'
]);

here is working example: http://jsfiddle/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'
    ]);
}