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. vue引入jquery插件

    在vue中使用jquery插件 1.引入jquery 第一种方法:全局引入jquery 在webpack.base.conf.js,新增以下代码 plugins: [ new webpack.opti ...

  2. 关于在docker中配置elasticsearch容器的方法

    一.关于docker的安装,注意几点 1.如果系统是Win10家庭版,是没有Hyper-V的,所以无法安装docker(运行docker安装包会报错),为此docker官网提供的解决方法是安装dock ...

  3. 接口测试参数化详解(Jmeter)

    简介 接口测试是目前最主流的自动化测试手段,它组合不同的参数向服务器发送请求,接受和解析响应结果,通过测试数据的交换逻辑来验证服务端程序工作的正确性.我们在测试过程中需要考虑不同的输入组合,来覆盖不同 ...

  4. Jmeter分布式测试dubbo接口2

    上次我们将dubbo接口与jmeter集成起来,但是jmeter是由java实现的,本身有很多限制,无法实现高并发,我们需要借助分布式来实现大压力测试. 在上次的例子中,我们只是实现了简单的dubbo ...

  5. python之同步IO和异步IO

    linux操作系统基础知识 用户空间和内核空间 操作系统的核心是内核,独立于普通的应用程序,可以访问受保护的内存空间,也有访问底层硬件设备的所有权限.为了保证用户进程不能直接操作内核保证内核的安全,操 ...

  6. json.load(f)方法使用*.json备忘

    在python中使用JSON,导入出现错误了,类型错误等. #!/usr/bin/python import json f = open('data.json', encoding='utf-8') ...

  7. Jenkins-ssh远程执行nohup- java无法退出

    一,初步 #执行方式 ssh 192.168.2.103 " nohup java -jar /home/a/ipf/ight/feedback/ixxxedback-platform-1. ...

  8. ubuntu 微信安装

    安装过程: 下载最新版本tar.gz压缩包https://github.com/geeeeeeeeek/electronic-wechat/releases/download/V2.0/linux-x ...

  9. z-tree的使用

    1.参考资料 1)官网:http://www.treejs.cn/v3/api.php 2)z-tree码云:https://gitee.com/zTree/zTree_v3 2.下载解压 案例演示: ...

  10. 51 Nod 1678 lyk与gcd(容斥原理)

    1678 lyk与gcd  基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 这天,lyk又和gcd杠上了. 它拥有一个n个数的数列,它想实现两种操作 ...