歌词

src/assets/data/lyrics/faruxue.lrc

@@ -0,0 +1,71 @@
+[00:01.91]发如雪
+[00:06.57]作曲:周杰伦 
+[00:10.46]作词:方文山
+[00:13.31]演唱:周杰伦 
+[00:17.81]
+[00:21.39]狼牙月 伊人憔悴
+[00:25.54]我举杯 饮尽了风雪
+[00:31.91]是谁打翻前世柜 惹尘埃是非
+[00:37.98]缘字诀 几番轮回
+[00:42.05]你锁眉 哭红颜唤不回
+[00:48.11]纵然青史已经成灰 我爱不灭
+[00:55.55]繁华如三千东流水
+[00:59.78]我只取一瓢爱了解 只恋你化身的蝶
+[01:09.65]你发如雪 凄美了离别
+[01:14.11]我焚香感动了谁
+[01:18.77]邀明月 让回忆皎洁
+[01:23.07]爱在月光下完美
+[01:26.07]你发如雪 纷飞了眼泪
+[01:30.71]我等待苍老了谁
+[01:35.35]红尘醉 微醺的岁月
+[01:39.57]我用无悔 刻永世爱你的碑
+[01:44.10]Rap：
+[01:44.34]你发如雪 凄美了离别
+[01:46.59]我焚香感动了谁
+[01:48.55]邀明月 让回忆皎洁
+[01:50.61]爱在月光下完美
+[01:52.76]你发如雪 纷飞了眼泪
+[01:54.78]我等待苍老了谁
+[01:56.66]红尘醉 微醺的岁月
+[01:59.42]
+[02:00.72]狼牙月 伊人憔悴
+[02:05.03]我举杯 饮尽了风雪
+[02:10.86]是谁打翻前世柜 惹尘埃是非
+[02:17.26]缘字诀 几番轮回
+[02:21.40]你锁眉 哭红颜唤不回
+[02:27.44]纵然青史已经成灰 我爱不灭
+[02:34.99]繁华如三千东流水
+[02:39.00]我只取一瓢爱了解 只恋你化身的蝶
+[02:48.89]你发如雪 凄美了离别
+[02:53.45]我焚香感动了谁
+[02:58.19]邀明月 让回忆皎洁
+[03:02.19]爱在月光下完美
+[03:05.39]你发如雪 纷飞了眼泪
+[03:10.03]我等待苍老了谁
+[03:14.70]红尘醉 微醺的岁月
+[03:19.09]我用无悔 刻永世爱你的碑
+[03:23.85]Rap：
+[03:24.09]你发如雪 凄美了离别
+[03:25.82]我焚香感动了谁
+[03:28.00]邀明月 让回忆皎洁
+[03:29.94]爱在月光下完美
+[03:32.14]你发如雪 纷飞了眼泪
+[03:34.29]我等待苍老了谁
+[03:36.61]红尘醉 微醺的岁月
+[03:38.64]
+[03:38.87]你发如雪 凄美了离别
+[03:43.07]我焚香感动了谁
+[03:47.75]邀明月 让回忆皎洁
+[03:51.86]爱在月光下完美
+[03:55.06]你发如雪 纷飞了眼泪
+[03:59.52]我等待苍老了谁
+[04:04.38]红尘醉 微醺的岁月
+[04:08.83]我用无悔 刻永世爱你的碑
+[04:13.81]啦儿啦 啦儿啦 啦儿啦儿啦
+[04:17.87]啦儿啦 啦儿啦 啦儿啦儿啦
+[04:21.93]铜镜映无邪 扎马尾 你若撒野
+[04:27.08]今生我把酒奉陪
+[04:30.31]啦儿啦 啦儿啦 啦儿啦儿啦
+[04:34.45]啦儿啦 啦儿啦 啦儿啦儿啦
+[04:38.52]铜镜映无邪 扎马尾 你若撒野
+[04:43.61]今生我把酒奉陪

src/assets/data/lyrics/faruxue.txt

@@ -0,0 +1,71 @@
+[00:01.91]发如雪
+[00:06.57]作曲:周杰伦
+[00:10.46]作词:方文山
+[00:13.31]演唱:周杰伦
+[00:17.81]
+[00:21.39]狼牙月 伊人憔悴
+[00:25.54]我举杯 饮尽了风雪
+[00:31.91]是谁打翻前世柜 惹尘埃是非
+[00:37.98]缘字诀 几番轮回
+[00:42.05]你锁眉 哭红颜唤不回
+[00:48.11]纵然青史已经成灰 我爱不灭
+[00:55.55]繁华如三千东流水
+[00:59.78]我只取一瓢爱了解 只恋你化身的蝶
+[01:09.65]你发如雪 凄美了离别
+[01:14.11]我焚香感动了谁
+[01:18.77]邀明月 让回忆皎洁
+[01:23.07]爱在月光下完美
+[01:26.07]你发如雪 纷飞了眼泪
+[01:30.71]我等待苍老了谁
+[01:35.35]红尘醉 微醺的岁月
+[01:39.57]我用无悔 刻永世爱你的碑
+[01:44.10]Rap：
+[01:44.34]你发如雪 凄美了离别
+[01:46.59]我焚香感动了谁
+[01:48.55]邀明月 让回忆皎洁
+[01:50.61]爱在月光下完美
+[01:52.76]你发如雪 纷飞了眼泪
+[01:54.78]我等待苍老了谁
+[01:56.66]红尘醉 微醺的岁月
+[01:59.42]
+[02:00.72]狼牙月 伊人憔悴
+[02:05.03]我举杯 饮尽了风雪
+[02:10.86]是谁打翻前世柜 惹尘埃是非
+[02:17.26]缘字诀 几番轮回
+[02:21.40]你锁眉 哭红颜唤不回
+[02:27.44]纵然青史已经成灰 我爱不灭
+[02:34.99]繁华如三千东流水
+[02:39.00]我只取一瓢爱了解 只恋你化身的蝶
+[02:48.89]你发如雪 凄美了离别
+[02:53.45]我焚香感动了谁
+[02:58.19]邀明月 让回忆皎洁
+[03:02.19]爱在月光下完美
+[03:05.39]你发如雪 纷飞了眼泪
+[03:10.03]我等待苍老了谁
+[03:14.70]红尘醉 微醺的岁月
+[03:19.09]我用无悔 刻永世爱你的碑
+[03:23.85]Rap：
+[03:24.09]你发如雪 凄美了离别
+[03:25.82]我焚香感动了谁
+[03:28.00]邀明月 让回忆皎洁
+[03:29.94]爱在月光下完美
+[03:32.14]你发如雪 纷飞了眼泪
+[03:34.29]我等待苍老了谁
+[03:36.61]红尘醉 微醺的岁月
+[03:38.64]
+[03:38.87]你发如雪 凄美了离别
+[03:43.07]我焚香感动了谁
+[03:47.75]邀明月 让回忆皎洁
+[03:51.86]爱在月光下完美
+[03:55.06]你发如雪 纷飞了眼泪
+[03:59.52]我等待苍老了谁
+[04:04.38]红尘醉 微醺的岁月
+[04:08.83]我用无悔 刻永世爱你的碑
+[04:13.81]啦儿啦 啦儿啦 啦儿啦儿啦
+[04:17.87]啦儿啦 啦儿啦 啦儿啦儿啦
+[04:21.93]铜镜映无邪 扎马尾 你若撒野
+[04:27.08]今生我把酒奉陪
+[04:30.31]啦儿啦 啦儿啦 啦儿啦儿啦
+[04:34.45]啦儿啦 啦儿啦 啦儿啦儿啦
+[04:38.52]铜镜映无邪 扎马尾 你若撒野
+[04:43.61]今生我把酒奉陪

src/pages/me/MyMusic.vue

@@ -15,16 +15,12 @@
           <div class="cover">
             <img v-lazy="$imgPreview(music.cover)" alt="">
           </div>
-          <div class="lyrics-wrapper">
+          <div class="lyrics-wrapper" ref="lyrics-wrapper">
             <div class="container">
-              <div class="lyrics">111111111111111</div>
-              <div class="lyrics">222222222222222</div>
-              <div class="lyrics">333333333333333</div>
-              <div class="lyrics">444444444444444</div>
-              <div class="lyrics">555555555555555</div>
+              <div class="lyrics" v-for="item in test">{{ item }}</div>
             </div>
           </div>
-
+          <!--          <div class="lyrics-mask"></div>-->
           <div class="bottom">
             <div class="desc">
               <div class="left">
@@ -59,7 +55,7 @@
               <img v-show="isLoop" src="../../assets/img/icon/me/loop.png" @click="isLoop = !isLoop">
               <img v-show="!isLoop" src="../../assets/img/icon/me/play-normal.png" @click="isLoop = !isLoop">
               <div class="center">
-                <img src="../../assets/img/icon/me/previous.png">
+                <img src="../../assets/img/icon/me/previous.png" @click="t">
                 <img v-show="isPlay" class="control" src="../../assets/img/icon/me/pause.png" @click="togglePlay">
                 <img v-show="!isPlay" class="control" src="../../assets/img/icon/me/play.png" @click="togglePlay">
                 <img src="../../assets/img/icon/me/next.png">
@@ -77,6 +73,9 @@
 <script>
 import {mapState} from "vuex";
 import globalMethods from "../../utils/global-methods";
+import {nextTick} from "vue";
+import lyricsFaruxue from '../../assets/data/lyrics/faruxue.txt'
+
 
 export default {
   name: "MyMusic",
@@ -97,6 +96,12 @@ export default {
         is_collect: false,
         is_play: false,
       },
+      s: {
+        0: '',
+      },
+      test: [
+        'sssssssssssssssss'
+      ],
       isPlay: false,
       isLoop: false,
       isMove: false,
@@ -117,6 +122,9 @@ export default {
   },
   mounted() {
     this.audio.src = this.music.mp3
+    if (process.env.NODE_ENV === 'development') {
+      this.audio.volume = .2
+    }
     this.audio.addEventListener('loadedmetadata', e => {
       this.duration = this.audio.duration
       this.slideBarWidth = this.$refs.slideBar.clientWidth
@@ -142,8 +150,69 @@ export default {
         this.isPlay = false
       }
     })
+
+
+    // let s = this.createLrcObj(lyricsFaruxue);
+
+    console.log(lyricsFaruxue)
   },
   methods: {
+    createLrcObj(lrc) {
+      let oLRC = {
+        ti: "", //歌曲名
+        ar: "", //演唱者
+        al: "", //专辑名
+        by: "", //歌词制作人
+        offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
+        ms: [] //歌词数组{t:时间,c:歌词}
+      };
+      if (lrc.length === 0) return;
+      let lrcs = lrc.split('\n');//用回车拆分成数组
+      for (let i in lrcs) {//遍历歌词数组
+        lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
+        let t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容
+        let s = t.split(":");//分离:前后文字
+        if (isNaN(parseInt(s[0]))) { //不是数值
+          for (let i in oLRC) {
+            if (i != "ms" && i == s[0].toLowerCase()) {
+              oLRC[i] = s[1];
+            }
+          }
+        } else { //是数值
+          let arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个
+          let start = 0;
+          for (let k in arr) {
+            start += arr[k].length; //计算歌词位置
+          }
+          let content = lrcs[i].substring(start);//获取歌词内容
+          for (let k in arr) {
+            let t = arr[k].substring(1, arr[k].length - 1);//取[]间的内容
+            let s = t.split(":");//分离:前后文字
+            oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组
+              t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
+              c: content
+            });
+          }
+        }
+      }
+      oLRC.ms.sort(function (a, b) {//按时间顺序排序
+        return a.t - b.t;
+      });
+      return oLRC
+      /*
+      for(let i in oLRC){ //查看解析结果
+          console.log(i,":",oLRC[i]);
+      }*/
+    },
+
+    t() {
+      this.test.push('asdfasssssssss')
+      nextTick(() => {
+        let comments = this.$refs['lyrics-wrapper']
+        comments.scrollTo({top: comments.scrollHeight - comments.clientHeight, behavior: 'smooth'})
+        // comments.scrollTop = comments.scrollHeight - comments.clientHeight
+      })
+    },
     togglePlay() {
       this.isPlay = !this.isPlay
       if (this.isPlay) {
@@ -205,6 +274,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    //position: relative;
 
     .cover {
       margin-top: 4rem;
@@ -240,6 +310,13 @@ export default {
       }
     }
 
+    .lyrics-mask {
+      top: calc(80vw + 7rem);
+      height: 8rem;
+      width: 100vw;
+      position: absolute;
+    }
+
     .bottom {
       position: absolute;
       bottom: 0;