web-dev-qa-db-fra.com

Liste de lecture audio: Comment lier des événements pour "changement de piste", "fin de piste"?

Je personnalise ma liste de lecture native Wordpress

echo do_shortcode('[playlist ids="3267,3266,821"]');

Je voudrais lier des événements pour détecter les "changements de piste" et "fin de piste" et faire quelque chose lorsque ces événements sont déclenchés.

Donc, j'ai vérifié wp-playlist.js. Je vois des événements mais je ne sais pas comment le lier sur un fichier js séparé (jquery)

events : {
        'click .wp-playlist-item' : 'clickTrack',
        'click .wp-playlist-next' : 'next',
        'click .wp-playlist-prev' : 'prev'
    },

    clickTrack : function (e) {
        e.preventDefault();

        this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
        this.setCurrent();
    },

    ended : function () {
        if ( this.index + 1 < this.tracks.length ) {
            this.next();
        } else {
            this.index = 0;
            this.current = this.tracks.at( this.index );
            this.loadCurrent();
        }
    },

    next : function () {
        this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
        this.setCurrent();
    },

    prev : function () {
        this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
        this.setCurrent();
    },

Est-il possible de lier ces événements?

mediamedia-libraryaudiomedia-settings
1
Atthapon Junpun-eak

Vous pouvez vous lier à l'événement 'terminé' en ciblant l'élément audio de la liste de lecture:

$('.wp-playlist .mejs-mediaelement audio').on('ended', function (event) {
    console.log('ended');
});

Les événements 'click' sont simplement standards, par exemple:

$('.wp-playlist-item').on('click', function (event) {
    console.log('clicked');
});
2
bonger