I have an animated image sequence which plays in a loop. How do connect it to a button that toggles between play and pause?

var images = new Array()
images = [
 'images/1.svg',
 'images/2.svg',
 'images/3.svg',
 'images/4.svg',
 'images/5.svg',
 'images/6.svg',
 'images/7.svg',
 'images/8.svg',
 'images/9.svg',
 'images/10.svg',
 'images/11.svg',
 'images/12.svg',
 'images/13.svg',
 'images/14.svg',
 'images/15.svg',
 'images/16.svg',
 'images/17.svg',
 'images/18.svg',
 ];

setInterval("Animate()", 100);

var x = 0;

function Animate() {
  document.getElementById("img").src = images[x]
  x++;
  if (images.length == x) {
    x = 0;
  }
}

     <div class="main">
   
  <div class="main vid1">
      <img id="img1" src="cat2/1.svg">
      </div>
  
       <div class="main vid2">
      <img id="img2" src="cat2/1.svg">
      </div>
    
 
      
</div>

     
    <div class="navfooter"> 
    
    
    <button id="bt1"></button>
    <button id="bt2"></button>
    
           
        </div>

  

     <div class="hidden-images">
    <img src="cat/1.svg" />
    <img src="cat/2.svg" />
    <img src="cat/3.svg" />
    <img src="cat/4.svg" />
    <img src="cat/5.svg" />
    <img src="cat/6.svg" />
    <img src="cat/7.svg" />
    <img src="cat/8.svg" />
    <img src="cat/9.svg" />
    <img src="cat/10.svg" />
    <img src="cat/11.svg" />
    <img src="cat/12.svg" />
    <img src="cat/13.svg" />
    <img src="cat/14.svg" />
    <img src="cat/15.svg" />
    <img src="cat/16.svg" />
    <img src="cat/17.svg" />
    <img src="cat/18.svg" />
    
</div>  
    

 </div>
<script>




const
  imgElm  = document.getElementById('img1')
, btOnOff = document.getElementById('bt1')
, images  = 
  [ 'cat/1.svg',  'cat/2.svg',  'cat/3.svg',  'cat/4.svg'
  , 'cat/5.svg',  'cat/6.svg',  'cat/7.svg',  'cat/8.svg'
  , 'cat/9.svg',  'cat/10.svg', 'cat/11.svg', 'cat/12.svg'
  , 'cat/13.svg', 'cat/14.svg', 'cat/15.svg', 'cat/16.svg'
  , 'cat/17.svg', 'cat/18.svg'
  ];



images.next       = 1;
images.refintv    = 0;
images.delay      = 100;

btOnOff.onclick   = startLoop;

function startLoop()
  {
  newImage();    // immediate changing on click

  
  btOnOff.onclick     = stopLoop;
  
  images.refintv = setInterval( newImage, images.delay);
  
  function newImage()
    {
    imgElm.src  = images[images.next];
    images.next = ++images.next % images.length;
    }
  }

function stopLoop()
  {
  clearInterval(images.refintv);
  btOnOff.onclick     = startLoop;
  }

var button = document.getElementById("bt1");
var audio = document.getElementById("player");

button.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    audio.loop= true;
  
  } else {
    audio.pause();
   
  }
   
  
});
 
  
</script>