vue 如何做音乐播放器中的歌词滚动?

最近在研究 使用 vue 做一个音乐播放器
现在的问题是 想做歌词随音乐滚动 想法不是很明确
我的想法是 :

      格式化 lrc格式的歌词 存入二维数组数组 [time][lyric]
      在audio 的 timeupdate 中比较当前时间和数组time
      控制歌词滚动
         

问题就在 怎么控制歌词滚动

或者有什么好的思路提供给我

回答:

  • 如果只是用来做练手的话,可以使用一个几乎没人用的HTML元素<marquee>,通过用下一句开始时间 – 当前句开始时间得到歌词跑完一次所需要的时间,将这个值设置给<marquee>元素,通过不断替换<marquee>元素实现歌词切换,而至于滚动这个元素会自己实现,而且由于设置了循环时间 = 下句开始时间 – 这句开始时间,所以歌词跑完正好是换下一句歌词的时候

  • 如果你是要实现上下滚动的话,用<marquee>就没办法灵活的设置滚动速度了(因为左右滚动完可以直接替换元素实现切换滚动速率,但是上下滚动的话,由于相邻两句速率不一定一样,比如第一句10秒放完,第二句5秒放完,那么,就需要将第1行字的高度,平摊在10秒内滚动完,第二句高度,平摊在5秒内滚动完),所以在这种情况下,建议用类似轮播图的实现思路:

    • 外层是一个歌词框(溢出部分隐藏)

    • 内层是一个包裹框,可以用<ul>实现

    • 然后里面一句歌词对应一个<li>

    • 通过下一句开始时间 – 这句开始时间得到这句运行时间,然后用JS获取当前li元素的高度,将这个高度平均到这段时间内做平滑动画,动画只修改元素的top,建议使用jQuery实现

    • 大致代码(只是写了个实现思路不一定可以运行)
      HTML:

<div class="lyric">
    <ul>
        <li>歌词第一行</li>
        <li>歌词第二行</li>
        ...
    </ul>
</div>

CSS:

.lyric {
    width: 400px;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.lyric ul {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    padding: 0;
}

.lyric ul li {
    list-item-style: none;
}

JS:

// 下面示例即为移动一句歌词的demo,这里就用X表示歌词对应的li的jQuery选择器
// 用timeGap表示这句歌词对应的滚动时间
var lyricHeight = X.height();

$('.lyric ul').animate({'top': '-' + lyricHeight + 'px'}, timeGap);
// 直接对ul上边距做-lyricHeight像素的偏移,动画时间为timeGap毫秒

回答:

前几天路过这个库,你看看有没有值得参考的地方 js-lyrics

回答:

//css
div{
    position: relative;
    overfllow:hidden;
    height:200px;
}
ul{
    position:absolute;
}
//html
<div>
    <ul :style="{top:calcTop()}">
        <li v-for="(lyric, time) in object" :class="{active: time==current}">
            //li里面再循环一下lyric
        </li>
    </ul>
</div>

//js
var arr = {
    '001':['我','们'],
    '002':['是','共'],
}

//这儿省略一下说个思路。
// calcTop 计算 li.active 的offsetTop  ,然后将值赋给盒子div 的top

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注