用Vue来实现音乐播放器(三十八):歌词滚动列表的问题

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、此时下面的迷你播放器是占高度的  所以我们以前的滚动距离的计算就会出现问题

原文地址:https://www.cnblogs.com/cmy1996/p/9217194.html

时间: 2024-11-03 07:01:00

用Vue来实现音乐播放器(三十八):歌词滚动列表的问题的相关文章

用Vue来实现音乐播放器(十六):滚动列表的实现

滚动列表是一个基础组件  他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件   <template> <!-- 当父组件传递给子组件的数据发生变化的时候 scroll可以监听到此时高度会发生变化 --> <!-- 子组件这里的:data和props里面的data相对于 --> <!-- 父传子的时候 data是对应的props里面的值 --> <scroll class=&quo

用Vue来实现音乐播放器(十四):歌手数据接口抓取

第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法  使他能够在singer.vue中调用 import jsonp from '../common/js/jsonp.js' import {commonParams,options} from './config.js' export function getSingerList() { const url = 'https://c.y.qq.com/v8/fcg-bin/v8.fcg' cons

如何写一个正经的Android音乐播放器 三

实现音乐的播放. 为了快速实现音乐播放,我们使用MediaPlayer而不用SoundPool,据说SoundPool比MediaPlayer的自由度更大.不过,根据我的了解,soundpool并不支持音频的解码,得自己去解码,而MeidaPlayer已经内置了一些解码方案,我看到的是,音频除了ape无损格式,都能播放. 你需要阅读: MediaPlayer API: http://developer.android.com/reference/android/media/MediaPlayer

VUE项目实现音乐播放器(四)------- 设计播放进度条 + 播放控制按钮

2020.3.31 9:18 好的,早上好各位,今天我们来进行一个很炫酷的页面开发——播放器控制页面( src\components\Play.vue ),如下图: 我们可以看到,该页面有很多元素组成,歌曲的封面.左上角的页面隐藏按钮,中间的播放进度条.歌词栏.下方的播放控制按钮.右下角的显示播放列表按钮,这些元素完美的结合在一起,整个页面有没有一种很高大上的感觉!好了,让我们来亲自动手实现它吧! 1. 歌曲封面&隐藏按钮 首先通过 getters 获取到歌曲的封面: computed: { i

android音乐播放器开发 SweetMusicPlayer 加载歌曲列表

上一篇写了播放器的整体实现思路,http://blog.csdn.net/huweigoodboy/article/details/39855653,现在来总结下加载歌曲列表. 比较好的实现思路就是,自己维护一个SQLite数据库,然后音乐信息都从sd卡上扫描,好处有很多,但是这样做的话代码量会比较大,写了一段扫描sd卡的代码,然后发现扫描音乐的速度简直慢的惊人,可能自己的目录太多,太深,目前还没想到一个比较好的算法去快速扫描sd卡. 楼主比较偷懒,android自己本身有一个关于媒体信息的数据

用Vue来实现音乐播放器(八):自动轮播图啊

slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup"> //要注意slot插槽里面的数据要先渲染出来 <slot> </slot> </div> <div class="dots&q

用Vue来实现音乐播放器(九):歌单数据接口分析

z这里如果我们和之前获取轮播图的数据一样来获取表单的数据  发现根本获取不到 原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话  是根本不能够修改请求头的  所以我们就考虑用axios  但是axios又不能进行跨域  那么我们要怎么拿到qq音乐的服务器的数据呢??其实是有办法解决的:我们可以进行后端接口代理  那么什么是后端代理呢?? 如果要使用axios直接进行跨域访问是不可以的,这是就需要配置代理了,为什么要配置代理呢? 原因

用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置

state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操作 比如与后端的一些交互  然后它可以取commit一个mutations 注意:我们也可以在组件中直接commit一个mutations Mutations:是唯一可以修改State的途径  其他

乐乐音乐播放器(三) 第一次引导页面

源码地址: http://www.eoeandroid.com/thread-584730-1-1.html 应用在第一次启动时,应先进入引导页面.怎样判断应用是否是第一次使用呢?这里我使用SharedPreferences 和 酷狗的 引导页面为例子,大概看了一下酷狗apk包里面的图片,发现酷狗的文字动画 里的文字 原来是 图片文字,不过这里我 就不用它 的图片文字,而是用textview来实现. 首先定义一个 Constants 类来 储存 SharedPreferences 配置文件的 内