Jplayer播放列表 - 点击播放按钮需要动态添加歌曲并在播放器中播放歌曲并切换播放按钮以暂停按钮

Question

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

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

但是歌曲1中的播放按钮没有更改为暂停按钮仍然是播放按钮。

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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;
}