Использование ссылки на вызывающий объект (this) с использованием HTML5 audio и jQuery - PullRequest
Новая
       1

Использование ссылки на вызывающий объект (this) с использованием HTML5 audio и jQuery

3 голосов
/ 11 марта 2012

Я создаю свой собственный аудиоплеер 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 относится к аудиоэлементу HTML5, который не имеет функции next().

Я также попробовал другой подход, используя 

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

Но они даже не вызывают тревогу. Также audio.ended не работает.

Итак, сейчас я в основном не знаю, кто-нибудь имеет представление, что я делаю не так? Заранее спасибо.

О, и я все это протестировал в последних версиях Google Chrome и Safari в Mac OS X.

РЕДАКТИРОВАТЬ Следуя совету, приведенному в Аудио-плейлист HTML5 - как воспроизвести второй аудиофайл после его окончания? , я также попробовал следующий код 

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

И 

player.addEventListener("ended", next);

Ни один из них не работает, хотя первый показывает предупреждение правильно.

РЕДАКТИРОВАТЬ 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();
    });
}

Но тогда я получаю сообщение о том, что у объекта нет метода next().

Я не знаю, что еще можно попробовать ... Любая дополнительная информация будет высоко оценена, спасибо!

1 Ответ

2 голосов
/ 11 марта 2012

есть пример списка воспроизведения HTML5, обрабатывающий событие ended здесь , если это поможет?

в вашем обработчике событий вы ссылаетесь на 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();
    });

}

см. MDN для получения дополнительной информации по ключевому слову this

...