使用HTML5音频和jQuery调用对象（this）的引用 [英] Use of reference to calling object (this) using HTML5 audio and jQuery

问题描述

我正在创建自己的HTML5音频播放器，可以处理播放列表。我创建了一个包含所有 play（）， pause（）的自定义 myPlaylist / code>， stop（）和其他所需的功能。这一切都工作正常，但此外，我需要知道什么时候音频文件已结束，以便自动开始播放下一个。

I'm creating my own HTML5 audio player capable of handling playlists. I have created a custom myPlaylist object with includes all play(), pause(), stop() and other needed functionality. This is all working correctly, but moreover, I need to be aware about when an audio file has ended in order to automatically start playing the next one.

以下是相关部分我使用的代码：

Here's the relevant parts of the code I'm using:

function myPlaylist(){

    var player = document.createElement('audio');
    var audio = $(player).get(0);

    this.next = function next(){
        // Picks next song in the playlist and plays it
        ...
    };

    $(audio).bind('ended', function() {
        alert("Song is finished!");
        // Here I want to call to my next() function
    });
}

我一直无法弄清楚如何去做。我已经尝试过几种组合，例如 $（this）.next（），这似乎是最合理的，并且实际显示了警报，但是却没有做任何事情， this.next（），它也显示警报，但随后显示错误，因为 this 引用HTML5音频元素，它没有 next（）函数。

I haven't been able to figure out how to do it. I've tried already several combinations, like $(this).next(), which seems the most reasonable and actually displays the alert, but then does nothing ¿?, also this.next(), which also displays the alert but then shows an error since this refers to the HTML5 audio element, which does not have a next() function.

我也尝试了另一种方法， p>

I've also tried another approach, using

audio.onended = function(){
    alert("Song is finished!");
    $(this).next();
}; 

但是这些甚至不会触发警报。另外 audio.ended 不起作用。

But those do not even trigger the alert. Also audio.ended does not work.

所以，我现在基本无能为力，有没有人有想法我做错了什么？

So, I'm basically clueless right now, does anyone have any idea what am I doing wrong? Thanks in advance.

哦，我已经在Mac OS X的最新版Google Chrome和Safari中测试了这一切。

Oh, and I've tested all this in the latest versions of Google Chrome and Safari in Mac OS X.

编辑按照 HTML5音频播放列表 - 如何播放第一个结束后的第二个音频文件？ ，我也尝试了下面的代码：

EDIT Following the advice given in HTML5 audio playlist - how to play a second audio file after the first has ended?, I've also tried the following code

player.addEventListener("ended", function() {
    alert("Song is finished!");
    $(this).next();
});

和

And

player.addEventListener("ended", next);

它们都不起作用，尽管第一个显示警报正确。

None of them work either, although the first one shows the alert properly.

编辑2 使用搜索我遇到这个问题，这也可能与我的问题有关，所以按顺序为了摆脱引用这个的任何可能的麻烦，我添加了一个引用对象本身的新变量，所以现在我基本上在处理：

EDIT 2 Using the search I came across this question, which might also have something to do with my problem, so in order to get rid of any possible troubles with the reference to this, I added a new variable referring to the object itself, so now I'm basically working with:

function myPlaylist(){

    var player = document.createElement('audio');
    var audio = $(player).get(0);
    var me = $(this);

    this.next = function next(){
        // Picks next song in the playlist and plays it
        ...
    };

    $(audio).bind('ended', function() {
        alert("Song is finished!");
        me.next();
    });
}

但是我得到一个错误，说Object没有方法 next（）。

But then I get an error saying that the Object does not have a method next().

我不知道还有什么可以尝试的...任何额外的信息都会很高赞赏，谢谢！

I don't know what else can I try... Any extra information will be highly appreciated, thank you!

推荐答案

在您的事件处理程序中，您引用 this ，但是在这个上下文中这个引用了捕获该事件的DOM元素，也就是你的音频元素..试试这个：

in your event handler you reference this, but in this context this refers to the DOM element that caught the event, i.e. your audio element.. try this instead:

function myPlaylist(){

    var self = this;
    var player = document.createElement('audio');

    this.next = function (){
        // Picks next song in the playlist and plays it
        ...
    };

    player.addEventListener("ended", function() {
        alert("Song is finished!");
        self.next();
    });

}

有关 this 关键字的更多信息，请参阅MDN

see the MDN for more info on the this keyword

这篇关于使用HTML5音频和jQuery调用对象（this）的引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！