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. 将div的内容生成清晰的PDF、高清PDF

    //需要引入html2canvas.js.jquery.js文件 html: <button type="button" class="btn btn-primar ...

  2. Git 设置 用户名 和 邮箱

    git config --global user.name "Vincent" git config --global user.email "********@qq.c ...

  3. 367-基于zynq XC7Z100 FMC接口通用计算平台

    基于zynq XC7Z100 FMC接口通用计算平台 一.板卡概述 本板卡基于Xilinx公司的FPGA XC7Z100 FFG 9000 芯片, 该平台为设计和验证应用程序提供了一个完整的开发平台. ...

  4. java.lang.Object类(JDK1.7)

    1.Object的类方法 package java.lang; public class Object { private static native void registerNatives(); ...

  5. [工具] BurpSuite--XssValidator插件

    0x00 安装 所需软件: 1.burpsuite 2.xssvalidator 源码:https://github.com/nVisium/xssValidator(按照编译指导编译) burpsu ...

  6. Mac下安装nginx并配置SSL实现Https的访问

    一.nginx安装 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/insta ...

  7. MVC-MVP-MVVM框架模式分析

    MVC(Model-View-Controller) MVC 架构模式图(经典版) 注:实际上,Model和View永远不能相互通信,只能通过Controller传递:上图只是MVC模式的经典图. M ...

  8. linux中shell编辑小技巧

    一.循环1到100 ..};do echo $i done 二.获取100以内的随机值 ] 三.截取字符串 demo= :} #截取3位字符echo ${demo:1} #截取1到最后的字符 希望大家 ...

  9. 谈谈对AQS的一些理解

    AQS的概念 AQS全称AbstractQueuedSynchronizer,是java并发包中的核心类,诸如ReentrantLock,CountDownLatch等工具内部都使用了AQS去维护锁的 ...

  10. 【GDOI2017模拟12.9】最近公共祖先

    题目 分析 首先,将这些节点按dfs序建一棵线段树. 因为按dfs序,所以在同一子树上的节点会放在线段树相邻的位置. 发现,对于一个位置x,它的权值只会对以x为根的子树造成影响. 当修改x时,用w[x ...