在JavaScript中连续播放两个文件 [英] Playing two files in a row in JavaScript

问题描述

我做错了.因此，我正在编写一个简单的脚本来告知当前时间. audiocontainer 是音频元素，并且 mp3play()函数已在前面进行了定义. 这样做的目的是:

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:

[播放hourXX.mp3]->结束时-> [播放minutesXX.mp3]->删除监听器，因此停止.

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

• 问题是:

没有功能，由于无法持续触发监听器，因此分钟XX.mp3无限循环(这是12和54分钟... 54分钟... 54分钟...")最后.

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.

使用功能，removeEventListener()函数根本无法启动音频.你知道为什么吗?

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

或者也许有更简单的方法来连续播放2 mp3吗?

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

}

推荐答案

由于您的问题有点本地化"(由于语法错误，该问题不起作用)，因此我对您的问题进行了抽象，以允许我提供对其他人也有用的答案.

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.

将此包含在您的上下文中:

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];
};

像这样使用它:

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

这是工作示例: 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'
    ]);
}

这篇关于在JavaScript中连续播放两个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！