Toggle pause model-viewer animation

Question

I'm currently developing a Shopify website with animated 3D models that really turn out great but the animations become quite repetitive. I tried to create a button that could toggle pause/play the animation but I couldn't do it. Shopify distributes modelviewer.dev technology. I followed their documentation but without luck. Could you help me?

Page example with 3D model animation: https://sportstraining.pt/collections/soccer/products/wheeled-board-soccer

Model-viewer documentation: https://modelviewer.dev/docs/index.html#entrydocs-animation-properties-paused

JS code

    $(".animation-pause").click(function() {
    if ($(this).parent().attr("paused") == 'undefined' && $(this).parent().attr("paused") == false) { 
      $(this).parent().play();
      $(this).text("PLAY");
    }
    else {
      $(this).parent().pause();
      $(this).text("PAUSE");
    }
  });

  $('model-viewer').each(function(i) {
    $(this).append('<div class="animation-pause">PAUSE</div>');
    $(this).append('<button class="animation-pause" slot="hotspot-one" data-position="..." data-normal="...">PAUSE</button>');
  });

  var modelViewer = document.querySelector(selector);
  var playRequest = document.querySelector("#overlay");

  sound.addEventListener("pause", () => {
     modelViewer.pause();
  });

  sound.addEventListener("play", () => {
    modelViewer.play();
    playRequest.classList.add("hide");
  });

  function hotspotButtonc {
    if (modelViewer.paused) {
      modelViewer.play();
    } 
    else {
      modelViewer.pause();
    }
  });