网易云歌词的处理和简单的实时显示(uni-app)

html设置

<!-- 歌词 -->
        <view class="scrollLrc">
          <text>{{currentLyric}}</text>
        </view>

1.在data中定义三个变量

    data() {
      return {
        lyric: [],//歌词
        lyricTime: 0,//歌词对应的时间
        currentLyric: "",//当前歌词对象
      };
    },

在监听音乐实时播放时获取歌词对应的时间（我这使用的是uni-app小程序项目，微信官方接口有直接监听音乐播放时的属性）

onLoad(options){
      //创建控制音乐播放的实例
      this.backgroundAudioManager=uni.getBackgroundAudioManager()
      //监听音乐实时播放的进度
      this.backgroundAudioManager.onTimeUpdate(()=>{
        this.musicPlayTime()
      })
    },

methods:{
      musicPlayTime(){
        //获取歌词对应时间 Math.ceil()向上取整
        let lyricTime = Math.ceil(this.backgroundAudioManager.currentTime);        
        //保存时间
        this.lyricTime=lyricTime
        // console.log(this.lyricTime);
        //获取当前歌词
        this.getCurrentLyric();
      },

2.先获取歌词信息 musicId是歌曲的id

async getLyric(musicId){
        let lyricData = await request("/lyric", {id: musicId});
        // console.log(lyricData);
        let lyric = this.formatLyric(lyricData.lrc.lyric);//歌词
        // console.log(lyric);
      },

3.调用方法处理歌词将时间和歌词拆分出来

获取歌词思路

最开始歌词的形式

通过split("\n")换行切割，变成数组的形式 (arr)

通过for循环将数组遍历出来 (temp_row)

通过“]”对时间和文本进行分离,变成数组的形式 (temp_arr)

通过pop()函数，保留歌词 （text）

 

formatLyric(text) {
        // console.log(text);
          let result = [];
          let arr = text.split("\n"); //原歌词文本已经换好行了方便很多，我们直接通过换行符“\n”进行切割
          // console.log(arr);
          let row = arr.length; //获取歌词行数
          for (let i = 0; i < row; i++) {
            let temp_row = arr[i]; //现在每一行格式大概就是这样"[00:04.302][02:10.00]hello world";
            // console.log(temp_row);
            let temp_arr = temp_row.split("]");//我们可以通过“]”对时间和文本进行分离,变成数组的形式
            // console.log(temp_arr);
            let text = temp_arr.pop(); //把歌词文本从数组中剔除出来，获取到歌词文本了！保留最后一个数组
            // console.log(text);
            }

获取歌词时间

通过对temp_arr进行遍历，使用substr()进行从1到9截取

再利用split()对":"进行分割得到分钟和秒数

计算出时间s

使用最开始定义的空数组result 将obj对象保存进数组

temp_arr.forEach(element => {
              // console.log(element);
              let obj = {};
              let time_arr = element.substr(1, element.length - 1).split(":");//先把多余的“[”去掉，再分离出分、秒
              let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1]); //把时间转换成与currentTime相同的类型，方便待会实现滚动效果
              // console.log(s);
              obj.time = s;//时间
              obj.text = text;//歌词
              result.push(obj); //每一行歌词对象存到组件的lyric歌词属性里
              // console.log(result);
  });

            result.sort(this.sortRule) //由于不同时间的相同歌词我们给排到一起了，所以这里要以时间顺序重新排列一下
            this.lyric=result
            // console.log(this.lyric);
        },
        sortRule(a, b) { //设置一下排序规则
          return a.time - b.time;
        },

this.lyric的值

 

4.设置歌词实时播放

在监听音乐实时播放时调用函数实现歌词实时播放

如果监听到的时间等于数组中的时间 则显示当前时间的歌词

//控制歌词播放
        getCurrentLyric(){
          let j;
          for(j=0; j<this.$data.lyric.length-1; j++){
            if(this.$data.lyricTime == this.$data.lyric[j].time){
                this.currentLyric=this.$data.lyric[j].text
            }
          }
        },