用Vue来实现音乐播放器(三十八):歌词滚动列表的问题
1、频繁切换歌曲时,歌词会跳来跳去
原因:
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来实现音乐播放器(三十八):歌词滚动列表的问题的更多相关文章
- 用Vue来实现音乐播放器(十八):右侧快速入口点击高亮
问题一:当我们点击右侧快速入口的时候 被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候 将scrollY的值和listHeight ...
- 用Vue来实现音乐播放器(十六):滚动列表的实现
滚动列表是一个基础组件 他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件 <template> < ...
- 用Vue来实现音乐播放器(十四):歌手数据接口抓取
第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法 使他能够在singer.vue中调用 import jsonp from '../common/j ...
- 用Vue来实现音乐播放器(十五):处理得到的歌手数据
之前得到的歌手数据是用forEach遍历添加的 没有顺序性 我们希望得到的数据是title:"热门"的数据在最上面 title为字母的数据按字母从低到高顺序排列 var ho ...
- Android应用--简、美音乐播放器获取专辑图片(自定义列表适配器)
Android应用--简.美音乐播放器获取专辑图片(自定义列表适配器) 2013年7月3日简.美音乐播放器开发 第二阶段已增加功能: 1.歌词滚动显示 2.来电监听 3.音量控制 4.左右滑动切换歌词 ...
- vue小练习--音乐播放器
1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...
- 用Vue来实现音乐播放器(十七):歌手页右侧快速入口实现
快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性 通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到l ...
- Vue实战:音乐播放器(一) 页面效果
先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心
- 用Vue来实现音乐播放器(二十一):歌手详情数据抓取
第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...
随机推荐
- vue引入jquery插件
在vue中使用jquery插件 1.引入jquery 第一种方法:全局引入jquery 在webpack.base.conf.js,新增以下代码 plugins: [ new webpack.opti ...
- 关于在docker中配置elasticsearch容器的方法
一.关于docker的安装,注意几点 1.如果系统是Win10家庭版,是没有Hyper-V的,所以无法安装docker(运行docker安装包会报错),为此docker官网提供的解决方法是安装dock ...
- 接口测试参数化详解(Jmeter)
简介 接口测试是目前最主流的自动化测试手段,它组合不同的参数向服务器发送请求,接受和解析响应结果,通过测试数据的交换逻辑来验证服务端程序工作的正确性.我们在测试过程中需要考虑不同的输入组合,来覆盖不同 ...
- Jmeter分布式测试dubbo接口2
上次我们将dubbo接口与jmeter集成起来,但是jmeter是由java实现的,本身有很多限制,无法实现高并发,我们需要借助分布式来实现大压力测试. 在上次的例子中,我们只是实现了简单的dubbo ...
- python之同步IO和异步IO
linux操作系统基础知识 用户空间和内核空间 操作系统的核心是内核,独立于普通的应用程序,可以访问受保护的内存空间,也有访问底层硬件设备的所有权限.为了保证用户进程不能直接操作内核保证内核的安全,操 ...
- json.load(f)方法使用*.json备忘
在python中使用JSON,导入出现错误了,类型错误等. #!/usr/bin/python import json f = open('data.json', encoding='utf-8') ...
- Jenkins-ssh远程执行nohup- java无法退出
一,初步 #执行方式 ssh 192.168.2.103 " nohup java -jar /home/a/ipf/ight/feedback/ixxxedback-platform-1. ...
- ubuntu 微信安装
安装过程: 下载最新版本tar.gz压缩包https://github.com/geeeeeeeeek/electronic-wechat/releases/download/V2.0/linux-x ...
- z-tree的使用
1.参考资料 1)官网:http://www.treejs.cn/v3/api.php 2)z-tree码云:https://gitee.com/zTree/zTree_v3 2.下载解压 案例演示: ...
- 51 Nod 1678 lyk与gcd(容斥原理)
1678 lyk与gcd 基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 收藏 关注 这天,lyk又和gcd杠上了. 它拥有一个n个数的数列,它想实现两种操作 ...