Display Post By Category From Selected Dropdown with Slider and Dynamic Podcast

Display posts by category from dropdown selected with slider and dynamic podcasts. When you click the listen now button it plays and all the podcast information is updated in the player. And the functionality is after the podcast player updates information according to the active slide.

<div class="podcast-page space-pd">
    <div class="container">
        <div class="row podcast-header-wrap">
            <?php
            if (have_rows('podcast_episodes_section')):
                while (have_rows('podcast_episodes_section')): the_row();
                    $heading = get_sub_field('heading');
                    ?>
                    <div class="col-lg-6 col-md-6 podcast-left-col">
                        <?php if ($heading) { ?> 
                            <h2 class="left-border-title mb-0"><?php echo $heading; ?></h2>
                        <?php } ?> 
                    </div>
                    <?php
                endwhile;
            endif;
            ?> 
            <div class="col-lg-6 col-md-6 podcast-right-side-btn">
                <div class="w-100">
                    <?php
                    $args = array(
                        'name' => array(
                            'post-podcast',
                        ),
                    );
                    $taxonomies = get_terms('podcast-category');
                    if ($taxonomies && count($taxonomies) > 0) {
                        ?>
                        <div class="dropdown">
                            <div class="js-link">Select Categories</div>
                            <?php
                            echo '<ul class="podcast-catgry js-dropdown-list">';
                            $i = 1;
                            foreach ($taxonomies as $term) {
                                $cls = null;
                                if ($i == 1)
                                    $cls = 'active';
                                echo '<li><a href="' . get_term_link($term) . '" class="nav-link ' . $cls . ' podcast-li" data-slug=' . $term->slug . '>' . $term->name . '</a></li>';
                                $i++;
                            }
                            echo "</ul>";
                        }
                        ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 audio-col-wrap"> 
                <div class="output-active-data"></div>                
            </div>
            <div class="col-lg-12 position-relative">
                <div class="podcast-listing"> 
                    <div id="podcastSlider"> 
                        <?php
                        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                        $arg = array(
                            'post_type' => 'post-podcast',
                            'post_status' => 'publish',
                            'posts_per_page' => -1,
                            'tax_query' => array(
                                array(
                                    'taxonomy' => 'podcast-category',
                                    'field' => 'term_id'
                                )
                            )
                        );
                        $wp_query = new wp_query($arg);
                        if ($wp_query->have_posts()):
                            $i = 1;
                            while ($wp_query->have_posts()): $wp_query->the_post();
                                $id = get_the_id();
                                $podcast_name = get_field('podcast_name');
                                $audio_file = get_field('audio_file');
                                ?>
                                <div class="podcast-post-item">
                                    <div class="podcast-slider-wrap"> 
                                        <div class="podcast-desc-wrap"> 
                                            <div class="h3"><?php the_title(); ?></div> 
                                            <?php
                                            if ($podcast_name):
                                                ?>
                                                <div class="podcast-name">
                                                    <?php echo wp_trim_words($podcast_name, 15, '...'); ?>  
                                                </div>
                                            <?php endif; ?>
                                            <?php
                                            if ($audio_file):
                                                ?>
                                                <a class="btn playAudio" href="javascript:void('0');" data-src="<?php echo $audio_file; ?>">
                                                    Listen Now <img src="<?php bloginfo('template_url'); ?>/img/play-icon-white.svg" alt="Listen Now">
                                                </a>
                                            <?php endif; ?>
                                        </div>
                                    </div> 
                                </div>
                                <?php
                                $i++;
                            endwhile;
                        endif;
                        wp_reset_query();
                        ?>
                    </div>
                </div>
            </div> 
        </div>   
        <?php
        if (have_rows('podcast_episodes_section')):
            while (have_rows('podcast_episodes_section')): the_row();
                $button_name = get_sub_field('button_name');
                $page_link = get_sub_field('page_link');
                ?>
                <?php
                if ($page_link):
                    ?>
                    <div class="row">
                        <div class="col-lg-12 text-center">
                            <a class="btn d-inline-block" href="<?php echo $page_link; ?>" target="_blank">
                                <?php echo $button_name; ?> <img src="<?php bloginfo('template_url'); ?>/img/btn_arw.svg" alt="Arrow">
                            </a>
                        </div>
                    </div>
                <?php endif; ?>
                <?php
            endwhile;
        endif;
        ?> 
    </div>
</div>

jQuery

<script>
    jQuery(document).ready(function ($) {

        var lastClass = '';

        function updateOutput() {
            var $currentFileActive = $('.slick-current');
            var title = $currentFileActive.find('.podcast-desc-wrap .h3').text();
            var shortDesc = $currentFileActive.find('.podcast-desc-wrap .podcast-name').text();
            var audioSrc = $currentFileActive.find('.podcast-desc-wrap .playAudio').data('src');
            var outputHtml = '<div class="h3 audio-name">' + title + '</div>';
            outputHtml += '<div class="podcast-name">' + shortDesc + '</div>';
            outputHtml += '<div class="audio-player"><audio id="audio-player" controls src="' + audioSrc + '">Your browser does not support the audio element.</audio></div>';
            $('.output-active-data').html(outputHtml);
        }

        function checkForChanges() {
            var $currentFileActive = $('.slick-current');
            var currentState = $currentFileActive.html();

            if (lastClass !== currentState) {
                lastClass = currentState;
                updateOutput();
            }
        }

        // Initial update
        updateOutput();

        // Polling interval
        setInterval(checkForChanges, 1000); // Check every second

        function updateUsingBtn() {
            jQuery('.podcast-desc-wrap .playAudio').on('click', function () {
                var $parentWrap = jQuery(this).closest('.podcast-desc-wrap');
                // Get the data-src value from the clicked .playAudio element
                var audioSrc = jQuery(this).data('src');
                var title = $parentWrap.find('.h3').text();
                var shortDesc = $parentWrap.find('.podcast-name').text();
                var outputHtml = '<div class="h3 audio-name">' + title + '</div>';
                outputHtml += '<div class="podcast-name">' + shortDesc + '</div>';
                // Display the data-src value in the .your-output div
                outputHtml += '<div class="audio-player"><audio id="audio-player" controls src="' + audioSrc + '">Your browser does not support the audio element.</audio></div>';
                jQuery('.output-active-data').html(outputHtml);

                // Display the new audio player in the .output-active-data div
                // Remove any existing audio player before appending the new one
                var $outputActiveData = jQuery('.output-active-data');
                $outputActiveData.find('.audio-player').remove();

                // Display the new audio player in the .output-active-data div
                $outputActiveData.html(outputHtml);
                // Play the audio
                var $audioElement = $outputActiveData.find('#audio-player')[0];
                if ($audioElement) {
                    $audioElement.play();
                }
            });
        }

        function slickCarousel() {
            $('#podcastSlider').slick({
                dots: false, // Show navigation dots
                infinite: true,
                speed: 1000,
                slidesToShow: 2,
                slidesToScroll: 1,
                autoplay: true, // Autoplay the carousel
                autoplaySpeed: 45500, // Autoplay speed in milliseconds
                responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1
                        }
                    }, 
                    {
                    breakpoint: 767,
                    settings: {
                        slidesToShow: 1
                    }
                },
                ]
            });
            // Add functionality to prev/next buttons
            $('.podcast-prev').click(function () {
                $('#podcastSlider').slick('slickPrev');
            });

            $('.podcast-next').click(function () {
                $('#podcastSlider').slick('slickNext');
            });
        }
        $(document).on('click', '.podcast-li', function (event) {
            event.preventDefault();
            $('.podcast-li').removeClass('active');
            $(this).addClass('active');
            var slug = $(this).data('slug');
            $.ajax({
                type: "POST",
                url: ajaxurl,
                data: {action: 'get_podcast_posts', slug: slug},
                beforeSend: function () {
                    $(".podcast-listing").css("opacity", "0.5");
                },
                success: function (response) {
                    if (response) {
                        //console.log(response);
                        $(".podcast-listing").html(response).css("opacity", "1");
                    }
                    slickCarousel();
                    updateUsingBtn();
                }
            });
            return false;
        });
    });
</script>
<script>
    jQuery(document).ready(function ($) {
        jQuery(".podcast-catgry li a.active").trigger('click');
    });
</script>

<script>
    jQuery(document).ready(function ($) {
        $(function () {
            var list = $('.js-dropdown-list');
            var link = $('.js-link');
            link.click(function (e) {
                e.preventDefault();
                list.slideToggle(200);
            });
            list.find('li').click(function () {
                var text = $(this).html();
                var icon = '';
                link.html(text + icon);
                list.slideToggle(200);
                if (text === '* Reset') {
                    link.html('Select Categories' + icon);
                }
            });
        });
    });
</script>

CSS

.dropdown ul {
    display: none;
    width: 100%;
}
.dropdown .js-link {
    background: transparent;
    color: #5C181B;
    border: 1px solid #5c181b;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 15px;
    position: relative;
    width: 100%;
    border-radius: 0;
    text-align: left;
    display: block;
    height: 50px;
    line-height: normal;
    text-transform: uppercase;
    text-shadow: none;
    cursor: pointer;
}
.dropdown ul.js-dropdown-list {
    position: absolute;
    top: 100%;
    z-index: 1;
    border: 2px solid #ccc;
    background: #fff;
    border-radius: 4px;
    left: -1px;
    width: 100%;
}
.dropdown ul.js-dropdown-list a {
    padding: 9px 15px;
    font-weight: 500;
    color: #5c181b;
    line-height: normal;
}
.dropdown ul.js-dropdown-list a:hover {
    background: #5c181b;
    color: #fff;
}
.book-left-col .left-border-title {
    margin-bottom: 0;
}
.podcast-page {
    background: #f4f4f4;
    width: 100%;
    position: relative;
    margin-top: 30px;
}
.podcast-right-side-btn .dropdown {
    margin: 0;
    width: 290px;
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    border-radius: 5px;
    flex-direction: column;
    background-color: #fff;
    background-image: url(../img/down-arrow-red.svg);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 95% 50%;
}
.podcast-right-side-btn .dropdown ul {
    display: none;
    border-top: 0.1em solid #c0cdd1;
}
.podcast-right-side-btn > .w-100 {
    display: flex;
    justify-content: flex-end;
}
.dropdown .js-link a {
    font-size: 16px;
    color: #5c181b;
    padding: 0;
    text-transform: uppercase;
    cursor: pointer;
    text-shadow: none;
    font-weight: 600;
}

.podcast-listing .slick-slider .slick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60px;
    height: 42px;
    width: 42px;
    background: 0 0;
    border: 1px solid #5c181b;
    background-image: url(../img/arrow-red.svg);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: center;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
}
.podcast-listing .slick-slider .slick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60px;
    height: 42px;
    width: 42px;
    background: 0 0;
    border: 1px solid #5c181b;
    background-image: url(../img/arrow-red.svg);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: center;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
}
.podcast-listing .slick-slider .slick-prev.slick-arrow {
    transform: rotate(180deg);
    top: -50px;
}
.podcast-listing .slick-next.slick-arrow {
    left: 0;
    right: -60px;
}
.podcast-listing .slick-slider .slick-prev:hover, .podcast-listing .slick-slider .slick-next:hover {
    background-image: url(../img/arrow-white.svg);
    background-color: #5c181b;
}
.book-slider-section .book-prev:hover, .book-slider-section .book-next:hover {
    background-image: url(../img/arrow-white.svg);
    background-color: #5c181b;
}
.podcast-listing .slick-list .slick-track {
    margin-left: inherit;
}
.podcast-listing {
    width: 100%;
    position: relative;
    margin: 25px 0;
    margin-top: 50px;
}
.podcast-desc-wrap .podcast-name {
    margin: 0;
    padding-right: 0;
    color: #000;
    line-height: 30px;
    margin-bottom: 20px;
}
.podcast-slider-wrap .btn:hover {
    background: #000;
    color: #fff;
}
.podcast-slider-wrap .btn img, .podcast-slider-wrap .btn svg {
    display: block;
    margin-left: 10px;
    width: 25px;
    height: 24px;
}
.podcast-post-item {
    padding: 15px;
    width: 100%;
    position: relative;
}
.podcast-page .btn.d-inline-block {
    margin-top: 25px;
}
.our-books-content {
    margin-top: 30px;
}
.podcast-post-item .podcast-slider-wrap {
    box-shadow: 0px 0px 21px transparent;
    padding: 15px;
    width: 100%;
    background: 0 0;
    height: 282px;
    position: relative;
    background-color: #f1f1f1;
}
.podcast-post-item .podcast-slider-wrap .podcast-desc-wrap {
    height: 100%;
    position: relative;
}
.podcast-post-item .podcast-slider-wrap .podcast-desc-wrap a.btn {
    position: absolute;
    bottom: 0;
}
.podcast-post-item:hover .podcast-slider-wrap, .slick-slide.slick-current.slick-active .podcast-post-item .podcast-slider-wrap {
    background: #fff;
    box-shadow: 0px 0px 21px #0000001A;
}

.podcast-page .audio-player {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    padding: 16px;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.podcast-page .audio-player audio {
    width: 100%;
    outline: none;
}

.podcast-page .audio-controls {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.podcast-page .audio-controls button {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 0 8px;
    cursor: pointer;
}
.podcast-page .audio-controls button:hover {
    background-color: #0056b3;
}
.podcast-page .audio-controls button:focus {
    outline: none;
}
.podcast-page .audio-info {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
}
.podcast-header-wrap {
    padding: 0 15px;
}
.audio-col-wrap {
    padding: 0 30px;
    margin-top: 40px;
}
.podcast-desc-wrap .h3, .audio-col-wrap .h3 {
    position: relative;
    margin-bottom: 10px;
    color: #5c181b;
    font-size: 40px;
    line-height: normal;
    font-weight: 400;
    font-family: 'Bebas Neue';
    text-transform: uppercase;
    margin-top: 0px;
}
.audio-col-wrap .podcast-name {
    padding-left: 46px;
}
.audio-col-wrap .h3 {
    position: relative;
    background: url('../img/play-icon-red.svg');
    background-repeat: no-repeat;
    background-position: 0px 7px;
    background-size: 35px;
    padding-left: 46px;
}

Display Post By Category From Selected Dropdown with Slider and Dynamic Podcast

jQuery

CSS

Output:-