如何通过range滑块调整setInterval间隔实现BPM和弦切换调速功能

• 你没有清除旧的定时器就直接新建setInterval，导致多个定时器同时运行，调速逻辑混乱
• 滑块元素ID是Vel，但你JS里用getElementById("VelocitySlider")读取，ID不匹配无法拿到正确的滑块值
• if判断误用赋值运算符=，应该用比较运算符===，而且你硬写了固定间隔，没有把BPM转为动态间隔
• 和弦数组越界问题：你取ar[i+1]的时候，当i是数组最后一位时，i+1会超出数组长度，显示undefined

核心逻辑 #

每次滑块值变动时，先调用clearInterval清除之前的定时器，再用新的BPM计算间隔后创建新的定时器即可。BPM转间隔毫秒公式：间隔 = 60000 / BPM（因为1分钟=60000毫秒，BPM是每分钟拍数）

修正后完整代码 #

HTML部分 #

<p>当前和弦：<span id="First"></span></p>
<p>下一个和弦：<span id="Next1"></span></p>
<p>BPM调速：<input oninput="changeVelocity()" onchange="changeVelocity()" type="range" min="40" step="5" max="180" value="40" class="slider" id="Vel"></p>
<p>当前BPM：<span id="BpmText">40</span></p>

JS部分 #

var i = 0;
var inter = null;
const chordList = ["A","Am","B","Bm","C","Cm","D","Dm","Em","F","Fm","G","Gm"];

function changeChord() {
  const currentChord = document.getElementById("First");
  const nextChord = document.getElementById("Next1");
  currentChord.innerText = chordList[i];
  // 处理下一个和弦的越界问题
  const nextIndex = (i + 1) % chordList.length;
  nextChord.innerText = chordList[nextIndex];
  i = nextIndex;
}

function changeVelocity() {
  const bpm = Number(document.getElementById("Vel").value);
  // 显示当前BPM
  document.getElementById("BpmText").innerText = bpm;
  // 清除旧定时器
  if(inter !== null) {
    clearInterval(inter);
  }
  // 计算新间隔创建定时器
  const intervalMs = 60000 / bpm;
  inter = setInterval(changeChord, intervalMs);
}

// 页面初始化启动默认BPM的定时器
changeVelocity();

内容的提问来源于stack exchange，提问作者Mr. Lima