网易云项目总结

最近闲着没事做，把之前做过的几个项目整理下，方便工作中遇到这样的业务逻辑能够更快的解决，提高自己开发效率。

难点一：歌词格式处理

后端返会的数据格式:

前端需要转为这样的格式：

解决方法：

1.将后端返会的数据进行分割将歌词和时间部分分割开来,使用split(/[(\r\n)\r\n]+/),将每句歌词分割成数组形式

2.然后使用slice区分时间部分和歌词部分，其中对时间部分还要进行处理，将时间转为毫秒的形式，方便后面歌词滚动出现

 let min = item.slice(1, 3);
          let sec = item.slice(4, 6);
          let mill = item.slice(7, 10);
          let lrc = item.slice(11);
          let time =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
            

3.给歌词加大加粗处理，当currentime位于两句歌词时间之间时，就给它加个动态样式

:class="{
          active:
            currentTime * 1000 >= item.time && currentTime * 1000 < item.pre,
        }"
        

4.对一些特殊情况进行处理 像：【00:01:000】和【00:01:01】的情况进行区分：

if (isNaN(Number(mill))) {
            mill = item.slice(7, 9);
            lrc = item.slice(10, item.length);
            time =
              parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          }

对下一句歌词进行处理：

arr.forEach((item, i) => {
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 100000;
          } else {
            item.pre = arr[i + 1].time;
          }
        });

总代码：

lyric() {
      let arr;
      if (this.lyricList.lyric) {
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          let min = item.slice(1, 3);
          let sec = item.slice(4, 6);
          let mill = item.slice(7, 10);
          let lrc = item.slice(11);
          let time =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9);
            lrc = item.slice(10, item.length);
            time =
              parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          }
          return { min, sec, mill, lrc, time };
        });
        arr.forEach((item, i) => {
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 100000;
          } else {
            item.pre = arr[i + 1].time;
          }
        });
      }
      // console.log(arr);
      return arr;
    },

难点二：歌词滚动出现

1.watch监听currentime的变化，获取加大加粗的歌词的offsetTop 2.让加大加粗的歌词的offsetTop固定在300，如果超过300就让屏幕滚动超过的距离

watch: {
    currentTime(newValue) {
      let p = document.querySelector("p.active");
      // console.log([p]);
      if (p) {
        if (p.offsetTop > 300) {
          this.$refs.musicLyric.scrollTop = p.offsetTop - 300;
        }
      }
    }

难点三：进度条随着歌词的变化而变动

<input
   type="range"
   class="range"
   min="0"
   :max="duration"
   v-model="currentTime"
   step="0.05"
   />

因为currentTime是不断变动的，所以用v-model动态绑定这个，duration为歌词最大的时间