Управление одним аудиофайлом с двумя ссылками

Question

Я хочу контролировать запуск и паузу одного аудио-файла двумя способами:

1. обычные элементы управления, которые отображаются с опцией «control»
2. JavaScript позадималенький значок, плавающий в верхней левой части экрана.

Так что, если кто-то запускает mp3 через изображение ИЛИ элементы управления, он должен воспроизводиться и должен быть либо приостановлен, нажав назначок в левом верхнем углу или на обычном плеере.

Но это не работает.Все, что мне сейчас удается, - это два игрока, которые будут воспроизводить один и тот же mp3, но нажатие на один из них не повлияет на воспроизведение другого ...

Пока мой код

//<![CDATA[
    window.onload=function() {
      
  document.getElementById("playAudio").addEventListener("click", function() {
            var audio=document.getElementById('testAudio');
            if(this.className=='is-playing') {
                this.className="";
                this.innerHTML="<i class='float'><img class='bildpur-s pur' src='https://www.liesenfeld.de/WP/images/play-small.gif'></i>";
                audio.pause();
                
            }
            else {
                this.className="is-playing";
                this.innerHTML="<i class='float'><img class='bildpur-s pur' src='https://www.liesenfeld.de/WP/images/pause-small.gif'></i>";
                audio.play();
            }
        }
        );
    } //]]>

.float {
        position: fixed;
        width: 50px;
        height: 50px;
        top: -8px;
        left: 0px;
        background-color: rgba(182, 149, 105, 0.8);
        color: #FFF;
        border-radius: 50px;
        text-align: center;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
        z-index: 41000;
        color: #fff4e3;
        line-height: 0.8;
        font-weight: bold;
    }

    .pur {
        box-shadow: 0 0 0;
    }

<p><audio id="testAudio" src="https://www.liesenfeld.de/medis/beitrag-erotikmassage.mp3" hidden=""></audio><a id="playAudio" href="#"><i class="float" title="Klicke hier um den Text zu hören"><img class="bildpur-s pur" src="https://www.liesenfeld.de/WP/images/play-small.gif"></i></a></p>
<br><br>
Both the triangle on the top<br>
AND the player below should control the same playback<br>
ATM hitting both triangles will start TWO seperate playbacks.
<p><audio id="testAudio" src="https://www.liesenfeld.de/medis/beitrag-erotikmassage.mp3" controls></audio><a id="playAudio" href="#"><i title="Klicke hier um den Text zu hören"></i></a></p>