1、频繁切换歌曲时，歌词会跳来跳去

原因：

// 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃
//每个currentLyric能实现歌曲的播放跳到相应的位置 是因为它内部有个计时器
//每次currentSong改变的时候都会重新new一个新的lyric-parser出来，
//但是我们之前的对象并没有做清理操作 也就是说我们之前对象还是有计时器在里面
//所以歌词会来回闪动
解决办法：

在切换歌曲之前 即getLyric()之前 重新去getLyric()之前
//我们要把当前的currentLyric给stop掉

2、还有一个bug 当我们点击暂停按钮的时候 歌词仍然会跳动 此时我们需要在togglePlaying()中解决

3、当播放状态为循环播放的时候  当播放时间为刚开始的时候  歌词并没有回到最初的位置  在loop函数中实现

4、当调整播放进度的时候  歌词进度并没有改变   解决办法：在onProgressBarChange()中添加一下逻辑

5、在cd下方显示当前歌词

6、考虑异常情况

7、当歌曲列表只有一首歌的时候 执行next函数的时候

解决办法：当列表只有一首歌曲的时候  直接让它循环播放即可

同样prev()也是一样的逻辑 在只有一首歌曲的前提下让它单曲循环

8、当我们在微信里面播放的时候 如果微信到后台了  实际上js是不会执行的 js不执行但audio是可以将当前歌曲播放完的  一旦当前歌曲播放完毕会去触发end事件  但是end不会被执行因为是js  如果end不执行 那么我们再次播放的时候songReady就一直不会设置为true  如果songReady不置为true 那么我们就切换不了

9、此时下面的迷你播放器是占高度的  所以我们以前的滚动距离的计算就会出现问题

用Vue来实现音乐播放器（三十八）：歌词滚动列表的问题的更多相关文章

  1. 用Vue来实现音乐播放器（十八）：右侧快速入口点击高亮

    问题一:当我们点击右侧快速入口的时候  被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候  将scrollY的值和listHeight ...

  2. 用Vue来实现音乐播放器（十六）：滚动列表的实现

    滚动列表是一个基础组件  他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件     <template> < ...

  3. 用Vue来实现音乐播放器（十四）：歌手数据接口抓取

    第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法  使他能够在singer.vue中调用 import jsonp from '../common/j ...

  4. 用Vue来实现音乐播放器（十五）：处理得到的歌手数据

    之前得到的歌手数据是用forEach遍历添加的  没有顺序性  我们希望得到的数据是title:"热门"的数据在最上面  title为字母的数据按字母从低到高顺序排列 var ho ...

  5. Android应用--简、美音乐播放器获取专辑图片（自定义列表适配器）

    Android应用--简.美音乐播放器获取专辑图片(自定义列表适配器) 2013年7月3日简.美音乐播放器开发 第二阶段已增加功能: 1.歌词滚动显示 2.来电监听 3.音量控制 4.左右滑动切换歌词 ...

  6. vue小练习--音乐播放器

    1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  7. 用Vue来实现音乐播放器（十七）：歌手页右侧快速入口实现

    快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性   通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到l ...

  8. Vue实战：音乐播放器（一） 页面效果

    先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心

  9. 用Vue来实现音乐播放器（二十一）：歌手详情数据抓取

    第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...

随机推荐

  1. 关于获取input标签属性的获取以及更改，此处用到的是readonly属性

    一开始,我使用的是Jquery框架中的$.("#input").readOnly,发现取出的值为undefined,不知道是不是jQuery中不支持获取标签属性的函数, 然后就使用 ...

  2. Css布局 响应式布局介绍

    1. 概念: 写一套css样式可以同时适配多个终端,是为解决移动互联网诞生的. 2. 作用: 面对不同的分辨率设备灵活性强,能够快捷解决多设备显示适应问题 3. 原理 媒体查询 ① 外联式媒体查询语法 ...

  3. Linux常用命令及Shell的简单介绍

    一.linux命令   1.查看指令的参数搭配: man 指令名称   2.基础指令 ls  列出当前目录下的所有文档的名称(文档指的是文件和文件夹) 常用参数搭配: ls -l 列出文档详细信息 l ...

  4. String,StringBuilder和StringBuffer

    String 字符串常量,由String创建的字符内容,长度是不可改变,存放字符的数组被声明为final. 实际上String类操作字符串是通过建立一个StringBuffer,然后调用append( ...

  5. Rootkit XSS

    0x00 XSS Rootkit介绍 Rootkit概念: 一种特殊的恶意软件            类型: 常见为木马.后门等            特点: 隐蔽 持久控制 谈到XSS,一般都是想到 ...

  6. [易学易懂系列|rustlang语言|零基础|快速入门|系列文章]

    简单易懂的rustlang入门教程. [易学易懂系列|rustlang语言|零基础|快速入门|(1)|开篇] [易学易懂系列|rustlang语言|零基础|快速入门|(2)|VCCode配置] [易学 ...

  7. SonarQube 7.7默认数据库连接方法

    SonarQube7.7默认数据库为H2 embbed数据库 连接字符串:jdbc:h2:tcp://localhost:9092/sonar 用户名密码都为空

  8. 伸展树splay之求区间极值

    前言 这篇博客是根据我在打这道题的时候遇到的问题,来打的,有些细节可能考虑不到. 题目 在N(1<=N<=100000)个数A1-An组成的序列上进行M(1<=M<=10000 ...

  9. C#对应JavaScript的银行家舍入规则(Math.Round()对应toFixed(f))

    Math.Round((n * u - t * u )/ u, f);//这里使用银行家四舍五入对应JS的 toFixed() ((n * u - t * u) / u).toFixed(f) f为小 ...

  10. 几道好玩的JS题目，看看你能答中几道。

    1,for (var i = 0; i < 5; i++) { console.log(i); } 这几行代码会输出什么? 输出 0 1 2 3 4 2,for (var i = 0; i &l ...