由于歌词的播放需要歌曲播放,切换歌曲,歌曲的播放模式等等有关联,因此,需要在这几处处理相关问题

1.循环播放回不到开始位置


loop() {
this.$refs.audio.currentTime = 0
this.$refs.audio.play()
if (this.currentLyric) {
//单曲循环的时候,歌词循环播放,seek回到0的位置
this.currentLyric.seek(0)
}
},

2.切换歌曲的时候,歌词跳动

这是因为在new Lyric中定时器,所以切换歌曲的时候,清除定时器


this.currentLyric = new Lyric(lyric, this.handleLyric)

3.歌词和音乐同步

当暂停歌曲的时候,歌词暂停
当播放歌曲的时候,歌词播放


togglePlaying() {
···
if (this.currentLyric) {
//歌曲暂停时,歌词暂停播放
this.currentLyric.togglePlay()
}
},

4.拖动progressBar时候,歌词随之拖动


onProgressBarChange(percent) {
const currentTime = this.currentSong.duration * percent
this.currentTime = this.$refs.audio.currentTime = currentTime
if (!this.playing) {
this.togglePlaying()
}
if (this.currentLyric) {
//拖动进度条,歌词联动
this.currentLyric.seek(currentTime * 1000)
}
},

原文地址:https://segmentfault.com/a/1190000016702038

vue-music:歌词的其他功能的更多相关文章

  1. Vue (二) --- Vue对象提供的属性功能

    --------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...

  2. vue 对象提供的属性功能、通过axio请求数据(2)

    1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...

  3. vue教程2-07 微博评论功能

    vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  4. Vue+Vuex 实现自动登录功能

    刚刚实现了Vue+Vuex的自动登录功能,在实现的时候遇到了一些问题,这里记录一下: 因为这个还不够完善,在写完下列代码后,又进行了补充,可以从https://www.cnblogs.com/xiao ...

  5. Vue项目之实现登录功能的表单验证!

    Vue项目之实现登录功能的表单验证! 步骤: 配置 Form表单验证; 1.必须给el-from组件绑定model 为表单数据对象 2 给需要验证的表单项 el-form-item 绑定 prop 属 ...

  6. VUE+Element 前端应用开发框架功能介绍

    前面介绍了很多ABP系列的文章<ABP框架使用>,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机 ...

  7. 一步步带你做vue后台管理框架(三)——登录功能

    系列教程<一步步带你做vue后台管理框架>第三课 github地址:vue-framework-wz 线上体验地址:立即体验 <一步步带你做vue后台管理框架>第一课:介绍框架 ...

  8. webpack搭建vue项目,实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...

  9. Vue项目实践中的功能实现与要点

    本贴记录项目实践中,各种功能的实现与技术要点,均有待改进. 路由切换的时候,显示loading动画 目前方案是: 在每个页面都手动装载一个loading组件组件的显示依赖vuex里面的一个值 , 在r ...

  10. (GoRails )使用Vue.js制作拖拉list功能(v5-8)

    视频5 改进视觉效果,让list看起来更舒服.新增横向滚动功能. 参考我的trello:https://trello.com/b/BYvCBpyZ/%E6%AF%8F%E6%97%A5%E8%AE%B ...

随机推荐

  1. (转) Git

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

  2. (bzoj1337 || 洛谷P1742 最小圆覆盖 )|| (bzoj2823 || 洛谷P2533 [AHOI2012]信号塔)

    bzoj1337 洛谷P1742 用随机增量法.讲解:https://blog.csdn.net/jokerwyt/article/details/79221345 设点集A的最小覆盖圆为g(A) 可 ...

  3. L. Right Build bfs

    http://codeforces.com/gym/101149/problem/L 给出一个有向图,从0开始,<u, v>表示要学会v,必须掌握u,现在要学会a和b,最小需要经过多少个点 ...

  4. centos7安装mysql5.7 使用yum

    https://blog.csdn.net/z13615480737/article/details/78906598 使用yum,比较简单,不用考虑版本依赖问题

  5. Java反射 : Declared的作用 ( 例如 : getMethods和getDeclaredMethods )

    import com.tangcheng.learning.service.lock.annotation.KeyParam; import lombok.Data; import lombok.Eq ...

  6. ios自定义日期、时间、城市选择器

    选择器,我想大家都不陌生,当需要用户去选择某些范围值内的一个固定值时,我们会采用选择器的方式.选择器可以直观的提示用户选择的值范围.统一信息的填写格式,同时也方便用户快速的进行选择,比如对于性别,正常 ...

  7. NF!=1

    NF表示列数,不等于1表示列数不为1列

  8. HDU 3377 Plan (插头DP,变形)

    题意:有一个n*m的矩阵,每个格子中有一个值(可能负值),要从左上角走到右下角,求路径的最大花费. 思路: 除了起点和终点外,其他的点可以走,也可以不走. (2)我用的是括号表示法,所以起始状态为') ...

  9. (1)Ngixn 编译安装 (版本:1.12.1)

        1.创建用户和群组     groupadd nginx     创建一个用户,不允许登陆和不创主目录     useradd -s /sbin/nologin -g nginx -M ngi ...

  10. lua_to_luac

    #!/bin/sh `rm -rf allLua.zip` `mkdir ./tempScripts` `mkdir ./tempScripts/scripts` `cp -a ./scripts/ ...