网易云实战项目(4)

今日项目的开发主要是实现了音乐播放与暂停,切换播放歌曲的功能

首先是一些昨天的代码回顾,今天的实现效果和昨天的一些代码密切相关:

 

我们先说这个切换播放歌曲:

切换播放歌曲的原理和修改playlist的方法一致,只是把palylist换成了playCurrentIndex,

让传输来的value修改到playCurrentIndex,就是歌曲的下标,因为他默认是0(第一首)

定义一个新的方法:

setPlayIndex参数和setPlaylist一致不过换掉了传输数据的变量

与setPlaylist方法不同的是,这里并没有使用commit来传值,而是使用了mutation来传值,

在有歌单列表的页面playlist.vue

 

即可,这是传值的两种方法,最后在每一个数据上绑定点击事件setPlayIndex(i)传值i(歌曲下标)

再来说说这个音乐播放器的实现:

使用一个audio绑定网易云音乐的api地址

autoplay:自动播放,paused:当前歌曲的暂停状态,play():播放当前歌曲,pause()暂停歌曲

准备一个变量控制播放暂停按钮的切换paused:true 

 

使用这样一个函数即可