Jplayer 播放列表 - 通过单击播放按钮需要动态添加歌曲并在播放器中播放歌曲并将播放按钮切换为暂停按钮

Question

• 歌曲 1 播放按钮
• 歌曲 2 播放按钮
• 歌曲 3 播放按钮

当我点击 song1 播放按钮时，我将使用 ajax 作为 json 动态获取歌曲详细信息，并立即在 jplayer 中播放歌曲，其中播放/暂停等控件下一步工作正常。

但是歌曲1中的播放按钮没有变成暂停按钮，仍然是播放按钮。

我需要将播放按钮更改为暂停按钮。如果我播放任何其他歌曲，比如歌曲 2，歌曲 2 播放按钮应该切换到暂停按钮，当前播放的歌曲应该停止播放。请看一下线框图。

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>

Answer 1

当播放器开始播放时，它会将jp-state-playing 类添加到容器中。您可以使用它在播放和暂停按钮之间切换。

在您的 html 中，您应该同时添加播放和暂停按钮。像这样：

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

现在，使用 css，您应该最初隐藏暂停按钮，只显示播放按钮：

.fa-pause{display:none;}

然后在播放时显示暂停图标并隐藏播放图标。

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