Jplayer Playlist - By clicking Play button need add song dynamically and play the song in the player and toggle play button to pause button

Question

Song 1 Play Button
Song 2 Play Button
Song 3 Play Button

When I click song1 play button I will get the song details dynamically using ajax as json and play the song immediately in jplayer where controls like play/pause next, previous are working fine.

But the play button in the song1 didn't change to pause button still remains as a play button.

I need to change the play button to pause button. If I play any other song say song2, song2 play button should toggle to pause button and the currently playing song should stop playing. Please have a look at the wireframe.

function UnitPlay(ele){
    var unit_id = $(ele).attr('data-song-id');
    $.ajax({
        url: "/get_song_details",
        dataType: 'json',
        data: {
            song_id: song_id,
        },
        success: function(msg) {
            var songs = msg['song_list'];
            play_song(songs);
        }
    });
};

function play_song(songs) {

        var myPlaylist = new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1",
            }, [
                {
                    title:"",
                    artist:"",
                    mp3:"",
                    oga:"",
                    poster: ""
                }
            ],
            {
            swfPath: "../../dist/jplayer",
            supplied: "oga, mp3",
            wmode: "window",
            useStateClassSkin: true,=
            playlistOptions: {
                autoPlay: true,
                displayTime: "fast",
            },
        }); // end jplayer initiate

        myPlaylist.setPlaylist(songs);

        $("#jquery_jplayer_1").on(
            $.jPlayer.event.ready + ' ' + $.jPlayer.event.play,
            function(event) {

                /* === ENABLE PLAYLIST ==== */

                var current = myPlaylist.current;
                var playlist = myPlaylist.playlist;
                $.each(playlist, function(index, obj) {
                    if (index == current) {
                        $(".jp-now-playing").html("<div class='jp-track-name'>" + obj.title + "</div> <div class='jp-artist-name'>" + obj.artist + "</div>");

                    }
                });
                $('#playlist-toggle').on('click', function() {
                    $('#playlist-wrap').stop().fadeToggle();
                    $(this).toggleClass('playlist-is-visible');
                });

            }); // end jplayer event ready

    }; // end document ready

<div class="media channel-detail-single-unit">
    <div class="media-body">
        <h4 class="media-heading">Song1</h4>
    </div>
    <div class="media-right">
        <!-- Song1 Play Button --->
        <a class="unit-play-btn channel-single-unit-play" onclick="UnitPlay(this)" data-unit_id="{{ song.id }}">
            <i class="fa fa-play"></i>
        </a>
    </div>
</div>


<!-- Jplayer Skin --->
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
            <!-- Audio Player -->

<!-- Visual Container -->
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
    <div class="jp-type-playlist">
        <!-- Flexbox -->
        <div class="jp-gui jp-interface flex-wrap mob-align-center">

            <!-- Play / Pause... Controls -->
            <div class="jp-controls flex-item">
                <button class="jp-previous" role="button" tabindex="0">
                    <img width="25" height="25" src="{% static 'images/jplayer/prev-icon.png' %}" alt="">
                </button>
                <button class="jp-play" role="button" tabindex="0">
                    <!--<img width="52" height="52" src="{% static 'images/jplayer/play-icon.png' %}" alt="">-->
                    <i class="fa fa-play"></i>
                </button>
                <button class="jp-next" role="button" tabindex="0">
                    <img width="25" height="25" src="{% static 'images/jplayer/next-icon.png' %}" alt="">
                </button>
            </div>
        </div>
    </div>
</div>

score 0 · Answer 1 · answered Jun 16 '21 at 13:27

When the player starts playing it adds the class jp-state-playing to the container. You can use this to toggle between play and pause button.

In your html you should add both the play and the pause button. Like so:

<button class="jp-play" role="button" tabindex="0">
    <i class="fa fa-play"></i>
    <i class="fa fa-pause"></i>
</button>

Now, with css, you should hide the pause button initially and only show the play button:

.fa-pause{display:none;}

Then on play show the pause icon and hide the play icon.

.jp-state-playing .fa-play{
    display:none;
}
.jp-state-playing .fa-pause{
    display:inline-block;
}

Jplayer Playlist - By clicking Play button need add song dynamically and play the song in the player and toggle play button to pause button

1 Answers1