Ajax update of iframe at specific time of the day

I have a section on a site where, at certain times of the day, it loads a different php page that contains the code to pick at random from a list of mixcloud shows (using Mixcloud’s embed iframe) It’s an online radio station so the idea being that between 5-8am for example, the 80s music php page is loaded and an iframe is picked at random to appear on the site, this way users don’t just get the same 80s show every morning and there’s a bit of ‘randomness’ to it (it’s still not a true online station but as close as using a custom solution) then at 8-11, it loads 90s music etc. I don’t think the Mixcloud details are too important to the question but I wanted to paint a complete picture.

The code for actually loading the php scripts on the front end is:

<?php
    if (date('H') >= 5 && date('H') < 8) {
        echo '<iframe width="100%" frameborder="0" src="80s-iframe-page-path-here"></iframe>';
    }
    if (date('H') >= 8 && date('H') < 11) {
        echo '<iframe width="100%" frameborder="0" src="90s-iframe-page-path-here"></iframe>';
    }
?>

An example of the script itself where the iframes are loading randomly is:

<script>
    var videos = [
        '?hide_cover=1&light=1&autoplay=1&feed=%2Fshow=path-here%2F',
        '?hide_cover=1&light=1&autoplay=1&feed=%2Fanother-show=path-here%2F',
    ];

    var index=Math.floor(Math.random() * videos.length);
    var html='<iframe width="100%" height="100" src="https://www.mixcloud.com/widget/iframe/' + videos[index] + '" frameborder="0" allow="autoplay"></iframe>';
    document.write(html);
</script>

In itself, this works great so visit the site between 5-8am and you will get a random 80s show. visit between 8-11 and you’ll get 90s etc. The issue I need to address though is as these are static shows and not a live stream, if you arrive at the site at 5am or 5.30am you’re going to get a 3 hour show but if you start it at 5.30am, it is going to play til 8.30am (cutting into the 90s show) so everyone will be out of sync plus anyone listening to it will just be met with silence once that 80s show has finished. I want to pull people back in to the schedule the best I can.

My initial thought was at 8am, show an ajax div saying ‘the 90s show is now playing, click here to refresh’ which reloads the page and 90s will play but firstly I’m not sure how to display that div automatically without page refresh but even with this, it requires reloading the page so isn’t the most polished solution.

So my decision is to instead just reload the iframe at 8am so if you’re listening to 80s still at 8am, that will just stop and 90s will start. It means an abrupt end but I’m fine with that if it means this happens automatically.

So steering back to the question, based on my code a user would need to refresh the page at 8am to get the 90s show so how can I make that automatic so at 8am, the iframe itself reloads, recognises it’s time for a show change and loads the relevant php file? I guess this is ajax but I have little experience of that.