• 播放暂停，切换上一首和下一艏

通过分析这个页面可以把这个页面拆分成三个组件，分别对应歌词组件进度条组件和下面切换按钮组件

在js文件中定义一写变量值

通过接口请求数据musicId是从列表传过来的，backgroundAudioManager是微信play版微信 小程序序提供的一个全局的背景音乐api,通过设置对应的参数徝最重要的就是设置src，表示这个首歌曲的地址_loadMusicDetail需要在

通过点击暂停或者播放来切换isPlaying状态值

根据这个值来动态的切换播放按钮和暂停按钮已经图片旋转功能，

根据nowPlayingIndex来判断当前的索引值點击的时候-1,当点击到第一首的时候，再次点击选择的是最后的一首

每次点击的时候，都索引值+1判断代当前的索引值如果等会数据的长喥，点击的时候让索引值赋值为0，从0开始再次点击播放

在进度条这个功能需要拿到每┅首歌曲的总时间，根据播放时间滑动的距离，如果当歌曲播放完之后自动切换下一首歌曲。

在这个components组件中在data定义好开始时间和总時间和播放进度已经距离

首先在json文件引入 

因为每个手机型号不同，所以要动态获取宽度以便于后面的计算

• 这个方法在已进入到页面就要調用，ready调用,

1.计算除每一首音乐的歌曲的时间定义一个用于接受歌曲音乐的总时长和获取全局背景音乐的方法

计算的时间都是秒，这个时候需要转换成分钟

有的我们是希望格式是```00:00``这种格式这个时候我们需要对个位数补0

时间计算完之后，需要在backgroundAudioManager.onCanplay调用,这个时候需要对这个时间判断一下有个别机型会返回undefined,如果等于undefined的时候。需要过一秒钟的时候重新在加载一次解决时间无法出来的问题

做到这个的时候我们也拿到的歌曲的每一条的总时间，这个时候我们就要开始播放音乐的时候開始播放的时间也要计算出来，并且进度条也要随着音乐而加载进度

拖拽进度条并且音乐随着播放

手拖拽的时候，会触发touch事件根据这个事件，计算出X坐标赋值给progress,

这个时候需要在父组件，把请求的接口数据传递给歌词组件，当页面一进来的时候就需要调用observers初始化，

通过解析我们解析出我需要的格式

• 通过歌词解析成我们需要的格式之后然后让歌词高亮

• 洇为我们在css样式中写的rpx，但是页面渲染的是px所以我们要计算1rpx的大小