vue项目：歌词随歌曲同步滚动

封装成对象，暴露出去共享使用

1、新建js文件
2、因为需要用到元素运动来实现歌词自上而下滚动的效果，又不想引用jquery增大js的加载，所有在对象内部封装了一个运动函数。
3、主要的函数是添加定时器来实现歌词和歌曲的播放的时间同步，因为歌曲有暂停的功能，所以也添加了清除定时器来实现歌词暂停的功能，此时在对象内部的两个函数中用到了同一个参数定时器，所有需要将定时器定义成对象自身的一个参数来实现参数共享。
4、因为要满足点击某一首歌曲来播放相关的歌词，所以也需要一个函数来重置对象自身的参数。对象内部也需要解析歌词数据的函数，将解析后的歌词数据中的时间点都统一转化成秒，来和audio的当前播放进度（Audio.currentTime）对比，达到歌词滚动同步歌曲播放进度的效果。
5、每次点击播放某一首歌曲都要先重置对象自身的参数，再进行歌词同步滚动。

新建的js代码如下：

export default {second2: 0, // 当前歌曲播放到多少毫秒gdtimer: '', // 歌词滚动的定时器height: 20, // 每一行歌词的高度obj: {}, // 解析歌词后的对象obj2: {}, // 备份obj// 字符串转换成秒parse2 (stri) {var arr = stri.split(':')var num = 0num = parseInt(arr[0]) * 60 + parseFloat(arr[1])return num},// 解析歌词parse (str) {var arr1 = []var arr2 = []this.obj = {time: [],content: []}this.obj2 = {time: [],content: []}arr1 = str.split('[')arr1.forEach((value, index) => {if (index > 0) {arr2 = arr2.concat(value.split(']'))}})arr2.forEach((value, index) => {if (index % 2 === 0) {this.obj.time.push(this.parse2(value))this.obj2.time.push(this.parse2(value))} else {this.obj.content.push(value)this.obj2.content.push(value)}})},// 将歌词添加到 P 标签中addcontent (conp) {this.obj.content.forEach((value, index) => {conp.innerHTML = conp.innerHTML + value + '<br>'})},// 实现歌词滚动gundong (conp) {this.gdtimer = setInterval(() => {var myaudio = document.querySelector('#main-audio')// console.log(myaudio.currentTime)this.second2 = myaudio.currentTime// this.second2 = this.second2 + 10if (this.second2 >= this.obj2.time[0]) {// 删除time数组中已经过的时间this.obj2.time.shift()console.log(this.second2, this)// 获取 p标签的top值var top = window.getComputedStyle(conp).topthis.startMove(conp, {top: parseInt(top) - this.height})}if (this.obj2.time.length <= 0) {this.second2 = 0this.lyticsEnd(conp)// clearInterval(this.gdtimer)}}, 50)},// 暂停歌词pause () {if (this.gdtimer !== '') {clearInterval(this.gdtimer)// console.log(this.obj)}},// 歌曲放完,重置该对象lyticsEnd (conp) {this.pause()conp.innerHTML = ''conp.style.top = this.height + 'px' // 大坑。单位必须带this.obj = {}this.obj2 = {}this.second2 = 0console.log('重置该对象成功', this)},// 运动函数startMove (obj, json, fnEnd) {var that = thisclearInterval(obj.timer)// 先清除之前的定时器obj.timer = setInterval(function () {var bStop = true// 假设所有的值都到了for (var attr in json) { // 遍历json属性var cur = (attr === 'opacity') ? Math.round(parseFloat(that.getStyle(obj, attr)) * 100) : parseInt(that.getStyle(obj, attr))// 对opacity 特殊处理var speed = (json[attr] - cur) / 6speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) // speed 数字转化，防止不能到达目标的bugif (cur !== json[attr]) bStop = false// 如果没有达到目标值，则bStop设为false;if (attr === 'opacity') {obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')'obj.style.opacity = (cur + speed) / 100} else {obj.style[attr] = cur + speed + 'px'}}if (bStop) {clearInterval(obj.timer)if (fnEnd) fnEnd() // 执行回调函数}}, 30)},getStyle (obj, name) {return obj.currentStyle ? obj.currentStyle[name] : window.getComputedStyle(obj, null)[name]// 浏览器兼容性处理，注意getComputedStyle为只读属性},getByClass (oParent, sClass) {var aEle = oParent.getElementsByTagName('*')var aResult = []var re = new RegExp('\\b' + sClass + '\\b', 'i')for (var i = 0; i < aEle.length; i++) {if (re.test(aEle[i].className)) aResult.push(aEle[i])}return aResult}
}

vue文件中如下使用：

     import lyrics from '../footer/lyrics'   // js文件路径视情况而定var conp = document.querySelector('.con-p')// 包裹歌词的元素容器lyrics.lyticsEnd(conp) // 重置对象lyrics.parse(this.lyrics, conp) // 解析歌词  this.lyrics 代表歌词数据lyrics.addcontent(conp) // 向元素容器中添加歌词内容lyrics.gundong(conp) // 歌词滚动函数

vue项目：歌词随歌曲同步滚动相关推荐

vue实现歌词随音乐同步滚动
请求回来的歌词是以下格式第一步先处理歌词 if (this.lyricList.lyric) { //判断有没有歌词,因为有些音乐没有歌词arr = this.lyricList.lyric.spl ...
仿网易云网页版音乐播放器，实现歌词随歌曲进行滚动高亮
引言前几天在使用网易云网页版听歌时,看着那个页面的歌词随歌曲进行高亮,突然也想自己手动地去实现一下,于是呢,就仿照了网易云音乐的网页自己也写了个页面.效果图如下: 当然了,此处不做css的样式介绍, ...
js 实现音乐播放器中歌词与歌曲同步的原理
首先知道歌词文件的后缀名是 .lrc (lyric歌词的缩写): 接着知道.lrc 文件的一般格式是 [** : ** . ***] 歌词内容(时间的tag标签组成): =============== ...
Vue项目中使用浏览器同步测试工具 browersync
问题: 在写Vue项目的时候,我们有时候需要在不同的设备中进行的调试.这时候就会很烦--比如要进行一个跳转首页的操作,我们需要在电脑上和手机上分别操作一次. 解决: 利用browser-sync插件 ...
vue歌词随着歌曲播放滚动demo 使用lyric-parser库解析歌词
演示需要注意:引入vue.js与lyric-parser.js lyric-parser.js地址:https://github.com/ustbhuangyi/lyric-parser/blob/ ...
vue项目跳转新页面滚动到顶部
1.首先排除整体页面有没有使用overflow:scroll/auto,如使用,则会出现window.scroll一直处于scrollTop=0的效果 2.router的index.js文件中 con ...
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例...
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析后台歌词接口返回的数据如下(base64字符串): W3R ...
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析: 后台歌词接口返回的数据如下(base64字符串): W3 ...
java 滚动歌词_歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例...
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析后台歌词接口返回的数据如下(base64字符串): W3R ...

vue项目：歌词随歌曲同步滚动

封装成对象，暴露出去共享使用

新建的js代码如下：

vue文件中如下使用：

vue项目：歌词随歌曲同步滚动相关推荐

最新文章

热门文章