用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 第三 ...
随机推荐
- 移除数组中指定键(Yii2)
/** * 移除数组中指定key * @param $data * @param $key * @return array */ public static function removeKey($d ...
- Redis info笔记
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/wufaliang003/article/d ...
- 阅读脚本控制pwm代码
在现有的项目上通过SoC的EHRPWM3B管脚产生PWM脉冲做为摄像头的framsync信号. datasheet描述: PWMSS:PWM Subsystem Resources eHRPWM: E ...
- Codeforces1238E. Keyboard Purchase(状压dp + 计算贡献)
题目链接:传送门 思路: 题目中的m为20,而不是26,显然在疯狂暗示要用状压来做. 考虑状压字母集合.如果想要保存字母集合中的各字母的顺序,那就和经典的n!的状态的状压没什么区别了,时间复杂度为O( ...
- C#其他知识
.NET理解为一个运行库环境和一个全面的基础类库. .NET三个关键实体(构造块):CLR. CTS. CLS 公共语言运行库层为CLR .功能:定位加载和管理.NET类型.也负责底层的工作如内存管理 ...
- Spring IOC -bean对象的生命周期详解
生命周期执行的过程如下:1) spring对bean进行实例化,默认bean是单例2) spring对bean进行依赖注入3) 如果bean实现了BeanNameAware接口,spring将bean ...
- pyqt5-QFrame边框样式
继承 QObject-->QWidget-->QFrame 是一个基类, 可以选择直接使用,主要是用来控制一些边框样式:例如:凸起.凹下.阴影.线宽 QFrame对象效果对照图: im ...
- Python的题目
1.将元组 (1,2,3) 和集合 {4,5,6} 合并成一个列表.2.在列表 [1,2,3,4,5,6] 首尾分别添加整型元素 7 和 0.3.反转列表 [0,1,2,3,4,5,6,7] .4.反 ...
- python 线程模块
Python通过两个标准库thread和threading提供对线程的支持.thread提供了低级别的.原始的线程以及一个简单的锁. threading 模块提供的其他方法: threading.cu ...
- ASP.NET大文件断点上传
HTML部分 <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx. ...