使用HTML5音频和jQuery对调用对象(this）的引用

Use of reference to calling object (this) using HTML5 audio and jQuery

本文关键字：this 引用 对象 调用 音频 HTML5 jQuery 使用      更新时间：2023-09-26

我正在创建自己的HTML5音频播放器，能够处理播放列表。我创建了一个自定义的myPlaylist对象，其中包括所有play()、pause()、stop()和其他所需的功能。这一切都正常工作，但此外，我需要注意音频文件何时结束，以便自动开始播放下一个。

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

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指的是不具有next()功能的HTML5音频元素。

我还尝试了另一种方法，使用

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

但这些甚至不会触发警报。此外，audio.ended也不起作用。

所以，我现在基本上一无所知，有人知道我做错了什么吗？提前谢谢。

哦，我已经在Mac OS X的最新版本的谷歌Chrome和Safari中测试了所有这些。

编辑遵循HTML5音频播放列表中给出的建议-如何在第一个音频文件结束后播放第二个音频文件？，我还尝试了以下代码

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

和

player.addEventListener("ended", next);

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

EDIT 2通过搜索，我遇到了这个问题，这可能也与我的问题有关，所以为了消除引用this时可能出现的任何问题，我添加了一个引用对象本身的新变量，所以现在我基本上使用：

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()。

我不知道我还能尝试什么。。。如有任何额外信息，我们将不胜感激，谢谢！

这里有一个处理ended事件的HTML5播放列表示例，如果有帮助的话？

在事件处理程序中，您引用this，但在此上下文中，this指的是捕获事件的DOM元素，即audio元素。。试试这个：

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

相关文章：