javascript - js 如何判断一个数字在一个数字数组的那个区间？

Question

我要做的是一个微信audio播放器音频字幕随时间高亮的效果。
假如（一个完整的音频包含这些）：
“我是一名前端新司机” 5秒
“我是一匹来自西北的狼” 10秒
“我很开心看到大家” 7秒
“XXXXXXXXXXX” 13秒

一个完整的音频包含这些句子（时长：5+10+7+13），后端已把这些数据整理返回到前端。
[5,10,7,13]

在音频播放过程中我通过currentTime获取他的当前秒，（这个播放器是可以通过进度条调整的）

setInterval(function() {
   audio.currentTime
}, 50);

假如是一个23，我如何通过后端传来的[5,10,7,13],比较是那个区间？
如果获取到这个区间我在通过添加类名让他高亮了，就是卡到这了，请各位前辈指点迷经。

<p>我是一名前端新司机</p>
<p>我是一匹来自西北的狼</p>
<p class="red">我很开心看到大家</p>
<p>XXXXXXXXXXX</p>

Answer 1

就现在这个问题，

function a(arr,num){
        var i= 0,sum=0,len=arr.length;
        if(!(len>0)){
            return;
        }
        //如果 num 的值超过了 数组之和，不在考虑范围之类
        for(i;i<len;i++){
            sum+=arr[i];
            if(sum>=num){
                console.log('需要的值i='+i);
                return;
            }
        }
    }
    a([5,10,7,13],23);

Answer 2

arr.forEach(function(x,y){
  if(y==0){
        arr[y]=x
  }
  else{
        arr[y]=x+arr[y-1]
   }
})

把后台数组处理一下[5,15,22,35]
这样不就可以知道23是在arr[2]和arr[3]之间了？

Answer 3

卧槽，我曾经搞了个极简的音乐播放器

不过，是直接获取标准格式的lrc文件，然后前端分割。

然后我的方法不是数组遍历，因为前端js里面一切皆对象，对象的查找快多了。

代码
https://github.com/anchengjia...
思路：
把分割音频后按照起始点向下取整存一个对象，然后currentTime每次向下取整，然后比较两个数字进行比较，如果一样，不管，不然就++，用++后的值匹配成一个选择器，直接去dom里面找是都存在，然后继续。

updateLyric(ev) {
    let audio = ev.target;

    // currentTime
    var currentTime = ~~audio.currentTime;
    if (!this.source.lrc[currentTime] || this.currentTime === currentTime) return;
    this.currentTime = currentTime;
    this.currentLine++;
    if (this.currentEle) this.currentEle.classList.remove('on');
    this.currentEle = this.lrcList.querySelector(`li:nth-child(${this.currentLine})`);
    this.currentEle.classList.add('on');
    if (this.currentLine > 5 && this.currentLine + 5 <= this.source.len) this.lrcList.scrollTop = (this.currentLine - 5) * this.lineHeight;
  }

Answer 4

接第一个哥们的答案，帮你写一下函数：

function getTimeIndex(timeArr,time) {
    var timeIndex = -1;
    for(var index in arr){
        if(timeArr[index]>time){
            timeIndex = index;
            break;
        }
    }
    return timeIndex;
}

第一个参数是你处理好的时间数组，第二个参数传你的时间。

Answer 5

你遍历你的数组。从前往后，然后做一个计数。

要不然你就把这个数组先处理一下