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

标签：arr console log temp app 歌词 let uni

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
            }
          }
        },

标签：arr,console,log,temp,app,歌词,let,uni
From： https://www.cnblogs.com/happy-p/p/17205694.html