JavaScript 面向对象的音频播放器不工作

Question

我正在 JavaScript 中构建一个面向对象的音频播放器。到目前为止，这是我的代码：

var audio1 = new Audio("http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a", "audio/mpeg");

function Audio(src, type) {
    //create audioElement
    this.audioElement = document.createElement("audio");
    this.audioElement.setAttribute("src", src);
    this.audioElement.setAttribute("type", type);
    document.getElementById("main").appendChild(this.audioElement);

    //create audioControls
    this.audioControls = document.createElement("div");
    this.audioControls.setAttribute("class", "play button");
    document.getElementById("main").appendChild(this.audioControls);
   
    this.playing = false;
    
    this.audioControls.onclick = function () {
        if (this.playing) {
            this.pause();
        } else {
            this.play();        
        }
    }
    
    this.play = function() {
        this.audioElement.play();
        this.playing = true;
        this.audioControls.setAttribute("class", "pause button");
    };
    
    this.pause = function() {
        this.audioElement.pause();
        this.playing = false;
        this.audioControls.setAttribute("class", "play button");
    };
}

@font-face {
    font-family:"Ionicons";
    src:url("http://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1");
    src:url("http://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("http://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("http://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"), url("http://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
    font-weight:normal;
    font-style:normal;
}
.button {
    font-family:"Ionicons";
    font-size:48px;
}
.play:before {
    content:'\f488'
}
.pause:before {
    content:'\f478'
}

<div id="main"></div>

播放按钮显示正确，但单击它时我在控制台中收到错误消息： TypeError: this.play 不是一个函数

所以我猜错误是我无法从另一个方法访问 class 的方法。如果能提示如何解决这个问题，我将不胜感激！

Answer 1

事件处理程序this上下文指的是触发事件的元素。

您可以使用经典的 var that = this 构造来解决此问题。

var audio1 = new Audio("http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a", "audio/mpeg");

function Audio(src, type) {
    //create audioElement
    this.audioElement = document.createElement("audio");
    this.audioElement.setAttribute("src", src);
    this.audioElement.setAttribute("type", type);
    document.getElementById("main").appendChild(this.audioElement);

    //create audioControls
    this.audioControls = document.createElement("div");
    this.audioControls.setAttribute("class", "play button");
    document.getElementById("main").appendChild(this.audioControls);
   
    this.playing = false;


    var that = this;

    this.audioControls.onclick = function () {
        if (that.playing) {
            that.pause();
        } else {
            that.play();        
        }
    }
    
    this.play = function() {
        this.audioElement.play();
        this.playing = true;
        this.audioControls.setAttribute("class", "pause button");
    };
    
    this.pause = function() {
        this.audioElement.pause();
        this.playing = false;
        this.audioControls.setAttribute("class", "play button");
    };
}

@font-face {
    font-family:"Ionicons";
    src:url("http://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1");
    src:url("http://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("http://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("http://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"), url("http://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
    font-weight:normal;
    font-style:normal;
}
.button {
    font-family:"Ionicons";
    font-size:48px;
}
.play:before {
    content:'\f488'
}
.pause:before {
    content:'\f478'
}

<div id="main"></div>

JavaScript 面向对象的音频播放器不工作

JavaScript object oriented audio player not working

javascript

oop

audio-player