How to reload without reload a player div?

I create a music wordpress site. I have integrated a player in a fixed position at the bottom of the screen, as in the following code (The player is just before the footer).

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title>Jean Pierre Farout</title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" media='screen' />
</head>
<body<?php if (is_home()) echo(' id="home"'); ?> <?php body_class(); ?>>
<header id="header" class="header"><nav id="my-menu">
    <ul class="menu-list">
        <li class="list-item"><a href="<?php echo site_url(); ?>">Accueil</a></li>
        <li class="list-item"><a href="<?php echo site_url(); ?>/videos">Vidéos</a></li>
        <li class="list-item"><a href="<?php echo site_url(); ?>/contact">Contact</a></li>
    </ul>
</nav>
</header>
<div id="content" class="site-content"></div>

<div id="player"></div>

<footer></footer>
</body>
</html>

I would like the player not to reload when I click on nav links to change pages. I want the player to continue playing (like on soundcloud).

I understand that Ajax can be used to do this. But I've tried a lot of codes and none of them work.

For example, I tried to put this code.

$(document).ready(function() {

    $("nav a").click(function() {
    $("#content").load(location.href + " #content > *");
        return false;
        });
    });

And when the player is playing and I click on a link in the nav, the page starts to reload while the player continues to play, as if the code wants to work. But the page keeps loading. The preloader rotates infinitely. However, while searching on the pages of this forum, I noticed that this solution works for many people. I don't know what's missing from the code.

Can someone help me, please?

Thank you.