在JavaScript中连续播放两个文件

Playing two files in a row in JavaScript

本文关键字:两个 文件 JavaScript 连续 播放      更新时间:2023-09-26

我看不懂。所以,我正在制作一个简单的脚本,告诉当前时间。audiocontainer是一个音频元素,mp3play()函数已经在前面定义过了。这个想法是这样做的:

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

  • 问题是:

如果没有 removeEventListener()函数,minuteXX.mp3将无限循环("这是12和54分钟……54分钟……54分钟……),因为它一直在最后触发听众。

使用 removeEventListener()函数,音频根本不开始。你知道为什么吗?

或者有没有更简单的方法来连续播放2个mp3 ?

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

既然你的问题是有点"本地化"(它不工作,因为语法错误),我已经抽象了你的问题,让我提供一个答案,是对别人也有用。

如何在一行中播放多个mp3文件

把这个包含到你的上下文中:

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/

在你的特殊情况下,它将是:

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