diff --git a/output.js b/output.js new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/data/lyrics/gaobaiqiqiu.lrc b/src/assets/data/lyrics/gaobaiqiqiu.lrc index b9ca04a..26ab6d6 100644 --- a/src/assets/data/lyrics/gaobaiqiqiu.lrc +++ b/src/assets/data/lyrics/gaobaiqiqiu.lrc @@ -1,6 +1,3 @@ -[00:00.00]周杰伦 - 告白气球 -[00:03.11]词:方文山 曲:周杰伦 -[00:11.18] [00:23.21]塞纳河畔 左岸的咖啡 [00:25.94]我手一杯 品尝你的美 留下唇印的嘴 [00:31.36] diff --git a/src/pages/me/MyMusic.vue b/src/pages/me/MyMusic.vue index 2078fd3..d2527a9 100644 --- a/src/pages/me/MyMusic.vue +++ b/src/pages/me/MyMusic.vue @@ -12,15 +12,23 @@ v-model:active-index="slideIndex">
-
- -
-
-
-
{{ item }}
+ +
+
+
{{ item.c }}
+
+
-
@@ -75,7 +83,7 @@ import {mapState} from "vuex"; import globalMethods from "../../utils/global-methods"; import {nextTick} from "vue"; // import lyricsFaruxue from '../../assets/data/lyrics/faruxue.txt' -import lyricsFaruxue from '../../assets/data/lyrics/faruxue.lrc' +import gaobaiqiqiu from '../../assets/data/lyrics/gaobaiqiqiu.lrc' export default { @@ -97,12 +105,7 @@ export default { is_collect: false, is_play: false, }, - s: { - 0: '', - }, - test: [ - 'sssssssssssssssss' - ], + lyricsTexts: [], isPlay: false, isLoop: false, isMove: false, @@ -131,9 +134,27 @@ export default { this.slideBarWidth = this.$refs.slideBar.clientWidth this.step = this.slideBarWidth / Math.floor(this.duration) }) + let lrcObj = this.createLrcObj(gaobaiqiqiu); + this.lyricsTexts.push(lrcObj.ms[0]) + this.lyricsTexts.push(lrcObj.ms[1]) + console.log(lrcObj.ms) this.audio.addEventListener('timeupdate', e => { + let currentTime = Math.ceil(e.target.currentTime) + let lastLyricsText = this.lyricsTexts[this.lyricsTexts.length - 1] + if (Number(lastLyricsText.t) < currentTime) { + for (let i = 0; i < lrcObj.ms.length; i++) { + let item = lrcObj.ms[i] + if (Number(item.t) > currentTime) { + if (item.c) { + console.log(item) + this.t(item) + break + } + } + } + } if (!this.isMove) { - this.currentTime = Math.ceil(e.target.currentTime) + this.currentTime = currentTime if (Math.ceil(e.target.currentTime) * this.step > this.slideBarWidth - 5) { this.pageX = this.slideBarWidth - 5 } else { @@ -151,11 +172,6 @@ export default { this.isPlay = false } }) - - - let s = this.createLrcObj(lyricsFaruxue); - console.log(s) - // console.log(lyricsFaruxue) }, methods: { createLrcObj(lrc) { @@ -205,13 +221,12 @@ export default { console.log(i,":",oLRC[i]); }*/ }, - - t() { - this.test.push('asdfasssssssss') + t(txt) { + // if (this.test.length === 2) return + this.lyricsTexts.push(txt) nextTick(() => { let comments = this.$refs['lyrics-wrapper'] comments.scrollTo({top: comments.scrollHeight - comments.clientHeight, behavior: 'smooth'}) - // comments.scrollTop = comments.scrollHeight - comments.clientHeight }) }, togglePlay() { @@ -318,6 +333,15 @@ export default { position: absolute; } + .lyrics-full { + .list { + .item { + height: 4rem; + } + } + + } + .bottom { position: absolute; bottom: 0;