如何使歌曲暂停并使用相同的按钮播放（按钮更改时）

Question

我有一个按钮，当我单击它时，它会从一个完整的扬声器图标变为一个空的扬声器图标。单击此按钮时，我有一首歌会暂停播放。我的问题是，当您向按钮发送垃圾邮件时，图标有时会变得过快，并且歌曲不会暂停，从而使歌曲在其扬声器图标为空时仍在播放。我如何获得它以便它们连接，如果它暂停了，该图标将是正确的图标？

这是歌曲     

<source src="song.mp3" type="audio/mpeg">
</audio>


<script type="text/javascript">

这是图标

 <div class="col">
 <button class="btn float-right purple" onclick="fav()" ><i  
 id="pauseplay" class="fas fa-volume-up whiteicon fa-lg"></i></button>
 </div>

这是连接图标并暂停和播放歌曲的JS

    <script type="text/javascript">



 (function(){
 var playing = !!('ontouchstart' in window) || !!('ontouchstart' in 
  document.documentElement) || !!window.ontouchstart || (!!window.Touch 
 && !!window.Touch.length) || !!window.onmsgesturechange || 
 (window.DocumentTouch && window.document instanceof 
 window.DocumentTouch),
 snd = document.getElementsByTagName('audio')[0],
 ctrl = document.getElementById('pauseplay');
 playing = !playing;
 ctrl.title = playing? 'Pause' : 'Play';
    if(playing){snd.autoplay = false; ctrl.src = '**your website url** 
 here/images/pause.png';}
    ctrl.addEventListener('click', function(){
    if(playing){
        snd.pause();


    } else {
        snd.play();

    }
    playing = !playing;
    ctrl.title = playing? 'Pause' : 'Play';

    }, false);
  })();
 </script>

这是更改图标的JS

  <script>
  function fav() {
  var icon = document.getElementById("pauseplay");
  if (icon.classList.contains("fa-volume-up")) {
  icon.classList.remove("fa-volume-up");
  icon.classList.add("fa-volume-mute");
  song.play();
  } else {
  icon.classList.remove("fa-volume-mute");
  icon.classList.add("fa-volume-up");
    song.pause();
  }
  }


 </script>