Playing two files in a row in JavaScript

时光毁灭记忆、已成空白 提交于 2020-01-23 08:39:25

问题


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

}

回答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'
    ]);
}


来源:https://stackoverflow.com/questions/16916896/playing-two-files-in-a-row-in-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!