Toggle playbackRate on animation using web animations API (waapi) on several elements

Question

I'm trying to make a toggle button that controls an SVG animation. It needs to toggle between normal and fast playback speed. Ideally, the end goal is to also set a timer so that it slow starts/stops as well - but I can't seem to get the playbackRate apply to the array of elements I've stored in a var. I'm not JS expert but I think there is a problem with my array, or just not defining the actual animation I'm trying to apply a playbackRate to.

Here's what I have so far: https://codepen.io/madmaxhayden/pen/qBmrGNM

var alldashes = document.getElementsByClassName('dash');
allwaves = Array.prototype.slice.call(alldashes);
// console.log(allwaves);

//var waveframes = {strokeDashoffset: 0, stroke: "#19D8FF", strokeDashoffset: 2000}
var timings =  {duration: 2000, easing: "linear", direction: "normal", iterations: Infinity, fill: 'both', playbackRate: 20}

// Set playback speed
function slowdown() {
  setInterval( function() {
    allwaves.playbackRate = 0.5;
  }, 3000);
}


// Toggle Button for Animation
var playbutton = document.getElementById('playsample');
var isPlaying = true;

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min);
}

playbutton.addEventListener("click", function() {
  if(isPlaying) {
    console.log("fast");  
    
    allwaves.forEach(function(el, i) {
    timings.delay = i * getRandomInt(0,500);
      el.animate([
        {strokeDashoffset: 0}, {stroke: "#19D8FF"},  {strokeDashoffset: 2000}
      ], timings);
      });
    
    
} else {
  console.log("slow");
  slowdown();


}
isPlaying = !isPlaying;
});

The play button applies the random delay to each element's animation.. but the slowdown function doesn't seem to have any effect.