用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 第三 ...
随机推荐
- 2019-11-29-VisualStudio-2019-尝试使用-C#-8.0-新的方式
title author date CreateTime categories VisualStudio 2019 尝试使用 C# 8.0 新的方式 lindexi 2019-11-29 08:41: ...
- java.lang.ClassNotFoundException: org.apache.jsp.login_jsp
<span style="font-family: Simsun; background-color: rgb(255, 255, 255);">想必大家在用Eclip ...
- Qt Creator 4.9 发布
Qt Creator 4.8中引入了语言服务器协议支持,允许Qt Creator通过利用此标准轻松支持更多编程语言,使IDE和其他编程工具可以轻松地获得通用编程语言支持的交换格式.使用Qt Creat ...
- Linux--目录管理与文件管理--02
******Linux目录结构与目录管理******* 一.Linux目录结构: 1.目录创建规则:FHS文件系统层次化标准 指定了Linux操作系统的哪些目录是一定要具备的 2.目录的结构 树形结构 ...
- SugarCRM开发入门
SugarCRM官网下载地址:https://sourceforge.net/projects/sugarcrm/ 概述 Sugar最初是基于LAMP(Linux.Apache.MySQL和PHP)运 ...
- SOA架构及其架构分析
一.什么是SOA SOA即面向服务的架构.分为三层结构:表示层(服务层).中间业务逻辑层.数据访问层. SOA是一种粗粒度.松耦合服务架构,服务之间通过简单.精确定义接口进行通讯,不涉及底层编程接口和 ...
- python之路day15--内置函数
函数分为自定义函数和内置函数 python内置函数分类: 5.5.1 强制转换 int() / str() / bool() / list() / tuple() / dict() / set() 5 ...
- Mac OS找不到/usr/include文件夹的解决办法
Mojave最新解决方案:终端执行: xcode-select --install #完成后执行 sudo installer -pkg /Library/Developer/CommandLineT ...
- percona-xtrabackup-8.0.7简单快捷使用
percona-xtrabackup-8.0.7简单快捷使用 # 参考资料: https://blog.csdn.net/vkingnew/article/details/83012316 # 环境: ...
- json.load(f)方法使用*.json备忘
在python中使用JSON,导入出现错误了,类型错误等. #!/usr/bin/python import json f = open('data.json', encoding='utf-8') ...