Ajax“Redirections”和.htaccess复制内容

I want to use a html audio player, but to keep the player playing when navigate between pages, I use Ajax to refresh the content only. The problem is my htaccess. I want to redirect everything to a index.php file, so I can validade any request, and then, return a html page. But when I try to refresh the content using Ajax, the htaccess make the redirection load the index.php again, making a index.php inside index.php, duplicating the template. Is any workaround for that case, to use this 2 thing together, to refresh content only in navigation, to keep the player playing, and make every redirect go to index.php, to validate the requests? I made a simple example below:

index.php

<?php

require_once "header.html";

$routes = array(
    "/" => "home.html",
    "/profile" => "profile.html",
    "/config" => "config.html"
);

$uri = $_SERVER["REQUEST_URI"];

$file = isset($routes[$uri]) ? $routes[$uri] : $routes["/"];
echo '<div id="content">';
require_once $file;
echo '</div>';

require_once "footer.html";

?>

.htaccess:

DirectorySlash Off

RewriteEngine On
RewriteBase /

RewriteRule ^(.*)$ index.php [L]

header.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

    $(document).on('click', "a", function(e){

        $.ajax({
            async: false,
            url: this.pathname,
            type: 'post',
            success: function(ret) {

                $("#content").html(ret);

            }
        });

        return false;
    });

</script>

<style>
    #content{
        border: 1px solid black;
    }
</style>

<div id="header">
    <a href="/">Home</a>
    <a href="/profile">Profile</a>
    <a href="/config">Configurations</a>
</div>

footer.html

<div id="footer">
    <audio controls>
        <source src="horse.ogg" type="audio/ogg">
        <source src="horse.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
</div>