JavaScript: Populate An Array Of A Given Length With Ranges Of Values

Overview

• I'm working on a prototype audio mixing app with the web audio api. I'm keeping track of the slider changes at time stamp tic indexes. The way I'm thinking about reproducing them during playback is to expand out a full array that identifies what the values should be at every tic index. The process would check on every tic and change the current value if it doesn't match the target.
• This feels like a brute-force naive approach. I have some ideas for how to write a function that wouldn't require building out the full array. For example, by using the original individual markers and comparing against them directly. Searching for a solution has proved difficult so far.

JavaScript Source

const init = () => {
  const breakpoints = [
    [0, "alfa"],
    [3, "bravo"],
    [9, "charlie"],
    [15, "delta"]
  ]
  const full = Array(20).fill(null)

  let bi = 0; // breakpoint index

  for (let fi = 0; fi < full.length; fi++) {
    if (breakpoints[bi + 1]) {
      if (fi === breakpoints[bi + 1][0]) {
        bi += 1;
      }
    }
    full[fi] = breakpoints[bi][1]
  }

 window.cout.innerHTML = JSON.stringify(full, null, 2)
}

document.addEventListener('DOMContentLoaded', init)

Output