How to manipulate WAAPI animation objects to loop through specific points in the animation timeline

Question

I'm using Web Animations API to animate some img DOM elements to make an image slider for a (kind of) sing along game. The image slides represent bars in sheet music, and each slide contains two bars. The slides currently animate starting at slide0 and ending at slide55 (or looping if Infinite is specified in the timing object), and works fine with its relative song. As a part of the game the users should be able to choose a portion of the song to play on loop. For example, if they wanted to keep looping slide16-slide32, then the animation should only target these slides.

I'm wondering if there is a way of manipulating the animation objects to achieve a functionality similar to this. I am reading a lot of great things about how WAAPI allows you to dynamically manipulate the running animation once it has started, but I can't find a way to manipulate which animation objects are actually animated. These animation objects have id's, but I can't find any examples of how they could be used.

The only solution I can think of is by limiting which elements to animate just before calling Element.animate() on each, something like:

    var firstBar = 4;
    var lastBar = 12;

    async function init() {
      var elements = document.querySelectorAll(`.slide`);
      elements = Array.prototype.slice.call(elements);
      var loopElements = await loopBars(firstBar, lastBar, elements)
      //map the elements and call Element.animate() method for each
      loopElements.map((element, i) => {
            imgAnimations[i] = element.animate(keysframes, timing)
        })
    };

    function loopBars(firstBar, lastBar, elementArray) {
      var elements = []
      for(firstBar; firstBar <= lastBar; firstBar++) {
          var slide = elementArray[firstBar];
          var pushToArray = elements.push(slide)
      }
      return elements
    }

However this would also involve changing the CSS positions of the slides, and just more or less defeats the purpose of using WAAPI for its capabilities of manipulating the animation objects after they've been created. I could also apply a variation of this function when the img tags are being created and added to DOM, but this would require removing and re-adding the DOM elements each time a user wants to loop different sections of the song.

I have made a JS fiddle to show how the elements are added to dom and animated with WAAPI, it includes all the functions I have discussed. The animation just loops the same 5 images. Any suggestions on my potential next move would help, thanks.

https://jsfiddle.net/j84ksdLp/122/