Javascript对象函数调用不会工作

时间:2016-08-22 22:10:52

标签: javascript oop

我正在制作HTML5音板,但我遇到了一些麻烦......

我正在尝试使用停止功能同时处理播放的所有声音。不幸的是,当我通过buttonpress调用此函数时,该对象似乎没有停止功能。实际声音元素的代码如下:

// Container to keep all sounds in one place. This is a Dictionary within a dictionary to be able to search by catagory.
var sounds = {};

// Counter to keep track of unique ID's
var lastID = 0;


// Base class for initializing Any class
var Base = function(methods){
    var base = function() {    
        this.initialize.apply(this, arguments);          
    };  

    for (var property in methods) { 
       base.prototype[property] = methods[property];
    }

    if (!base.prototype.initialize) base.prototype.initialize = function(){};      

    return base;    
};

//Complete class for the Sound object. Generates its own DIV's and HTML5 tags to play stuff.
var Sound = Base({ 
    // Init all the variables. 
    initialize: function(name, file, target='Sounds') {
        this.name = name;
        this.file = file
        this.button = null;
        this.audioelement;
        this.id = lastID + 1;
        this.target = target;
        lastID ++;


        // Check if the catagory is there, if not: create it with a placeholder object
        var catagory = sounds[this.target];
        if(catagory == null){
            sounds[this.target] = {99:null};

        }
        sounds[this.target][this.id] = this;

        // Call init function
        this.init();
    },

    play : function() {
        obj = this
        if(obj.audioelement.paused == true){
            obj.audioelement.play();    
        }else{
            obj.audioelement.pause();
            obj.audioelement.fastSeek(0);
        }

    },
    stop : function(){
        obj = this;
        obj.audioelement.pause();
    },
    init : function(){

        // Statement for JS class based shenanigans.
        obj = this

        // Create a button and add some text to it
        obj.button = document.createElement("BUTTON");
        obj.button.appendChild(document.createTextNode(obj.name));

        // Set ID's and names to keep track of this button
        obj.button.id = obj.id;
        obj.button.name = obj.target;

        // Get or create parent element. Used for catagory based display
        var el = getOrCreateElement(obj.target)
        el.appendChild(obj.button);

        // Create audio element and set appropriate settings
        obj.audioelement = document.createElement("AUDIO");
        obj.audioelement.src = obj.file;
        obj.audioelement.name
        obj.button.appendChild(obj.audioelement);

        // Add function to play/pause to button
        obj.button.onclick = buttonClicked;

});
function buttonClicked(){
    // Fetch sound from dicionary container using the name and id from the button [SET AT SOUND.INIT()]
    var sound = sounds[this.name][this.id];
    // Call the play function in [SOUND]
    sound.play();
}

对于stopall函数:

function stopAll(){
    // Scroll through the entire dictionary
    for ( var key in sounds){
        for ( var id in sounds[key]){
            // Check if the sound is not a placeholder
            if(id == 99){
                continue;
            }
            // Call stop function with fetched object.
            var sound = sounds[key][id];
            sound.stop();
        }
    }
}

奇怪的是,播放功能似乎确实有效,但不是停止功能。它说对象没有那个特定的功能......

任何想法都会受到欢迎!

WM

1 个答案:

答案 0 :(得分:0)

除了方法之外,

for ( var x in object)遍历了更多的属性,包括基础对象原型上的方法。

如果你在那个内循环中console.log(id);,你会看到额外的那些。

尝试在内部for循环中添加此内容:

if (typeof id !== 'function') {
    continue;
}

编辑:这不太正确,但我无法立即看到它应该是什么。它几乎就在那里,从记忆中来!继续玩它。