用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 第三 ...
随机推荐
- caffe数据集LMDB的生成
本文主要介绍如何在caffe框架下生成LMDB.其中包含了两个任务的LMDB生成方法,一种是分类,另外一种是检测. 分类任务 第一步 生成train.txt和test.txt文件文件 对于一个监督学 ...
- 2019.9.17更换ubuntu的镜像源 ubuntu安装lamp iis安装网站和ftp站
更换ubuntu的镜像源 /etc/apt/sources.list cp /etc/apt/sources.list /etc/apt/sources.list.bak 备份这个文件 vim / ...
- (转) IntelliJ IDEA2018激活
IntelliJ IDEA2018破解教程 破解方法:下载破解补丁→修改配置文件→输入激活码→激活成功 由于JetBrains封杀,大部分激活服务器已经不能使用,使用下面的比较麻烦的方法也可以进行破解 ...
- CDN学习记录
0x00 简介 CDN的全称是Content Delivery Network,即内容分发网络.CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分 ...
- vs开发之工程属性
1.建立工程 最好使用自己创建工程 然后把代码移过去 2.不要使用别人建立的工程直接导入(差异比较大的话),后面32位 64位 配置属性 可能造成冲突 3.冲突了 还需要重新做 上面 1
- python 文件夹压缩
import os import zipfile def zipDir(dirpath,outFullName): """ 压缩指定文件夹 :param dirpath: ...
- 漫谈 MyCat 配置系统
上篇文章<MyCat 启蒙:分布式系统的数据库架构演变>中,我们通过一个项目从零到百万级访问的变化,展示了这个过程中的数据层架构变化.其中说到了数据层架构变化所带来的三个问题: 读写数据源 ...
- 1 搭建K8s集群
官网:https://kubernetes.io/docs/setup/production-environment/tools/kubeadm/install-kubeadm/#installing ...
- puppet 源码安装
puppet 源码安装 作者: admin 分类: 自动化管理 发布时间: 2013-04-23 10:25 ė 1932次浏览 6 暂无评论 puppet最新源码详细安装: 在网上找了很多相关pup ...
- 【NOIP2016提高A组五校联考2】string
题目 给出一个长度为n, 由小写英文字母组成的字符串S, 求在所有由小写英文字母组成且长度为n 且恰好有k 位与S 不同的字符串中,给定字符串T 按照字典序排在第几位. 由于答案可能很大,模10^9 ...