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

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. radio与img对齐 (CSS3)

    实现方式: html: <div class="pay-four"> <div class="pay-four-border"> < ...

  2. POJ-1181-食物链

    链接:https://vjudge.net/problem/POJ-1182 题意: 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1 ...

  3. 洛谷 P3957 跳房子

    https://www.luogu.org/problemnew/show/P3957 错误记录:1.没开longlong 2. -inf不够小 #include<cstdio> #inc ...

  4. 082 Remove Duplicates from Sorted List II 有序的链表删除重复的结点 II

    给定一个有序的链表,删除所有有重复数字的节点,只保留原始列表中唯一的数字.例如:给定 1->2->3->3->4->4->5 ,则返回 1->2->5给 ...

  5. 调用submit()方式提交表单

    今天在看高级程序设计时看到的这样一段话: 在以调用submit()方法的形式提交表单时,不会触发submit事件 写了一个小例子做了下测试,的确如此: <form id="fm&quo ...

  6. c指针参数常见错误

    参数的地址是可以修改的,修改后的地址是不可能传回给调用处的指针变量.也就是说,可以修改参数地址所指的单元的值,这是可以传回到调用处的变量里面的. #include <stdio.h> #i ...

  7. 用vue.js重构订单计算页面

    在很久很久以前做过一个很糟糕的订单结算页面,虽然里面各区域(收货地址)使用模块化加载,但是偶尔会遇到某个模块加载失败的问题导致订单提交的数据有误. 大致问题如下: 1. 每个模块都采用usercont ...

  8. vue2.0:(三)、项目开始,首页入门(main.js,App.vue,importfrom)

    接下来,就需要对main.js App.vue 等进行操作了. 但是这就出现了一个问题:什么是main.js,他主要干什么用的?App.vue又是干什么用的?main.js 里面的import fro ...

  9. CF1060D Social Circles

    思路: 贪心.既然每个人的左边是其他人的右边,每个人的右边是其他人的左边,那么使重叠的部分最多即可. 实现: #include <bits/stdc++.h> using namespac ...

  10. Android程序初体验

    第一个程序的实现的最终功能是: 点击"正确"或者"错误"会得到一个是否正确的提示. 直接上效果图.     此次涉及代码编写的文件有4个: package co ...