使用原生js实现歌曲上一曲/下一曲

使用原生js+jqery写的网页播放器实现下一曲/上一曲功能

数据库使用的是leancloud，对象储存使用的是七牛云。

先上代码（下一曲）：

nextSong() {
    $('.nextSong').on('click', (e) => {
        e.preventDefault()
        let songid = this.view.getSongId()//从查询参数里面获取当前播放的歌曲id
        this.model.getAlbumId(songid).then(() => {//根据当前歌曲id查询专辑id（parent属性）
            let albumid = this.model.albumSongs.id//getAlbumId函数根据当前歌曲id，返回一个专辑id
            this.model.getAlbumSongs(albumid).then(() => {//获取到专辑id后，根据专辑id查询专辑里面的所有歌曲
                let songs = this.model.albumSongs.songs
                let songIndex//声明一个歌曲角标，用来记录播放歌曲的角标数字
                for (let i = 0; i < songs.length; i++) {//当前播放的歌曲信息是render的model.data里面的数据，用model.data里面的歌曲id去和专辑里面的所有歌曲id去比较，就可以得到当前的歌曲角标
                    if (songs[i].id === this.model.data.id) {
                        songid = songs[i].id
                        songIndex = i//
                        break
                    }
                }
                //注意，如果在这里打印歌曲角标，控制台其实得到的是上一首歌曲的角标，因为在你点击下一曲后后，页面的元素其实已经被替换为新的歌曲了
                if (songIndex === songs.length - 1) {//如果当前歌曲是专辑的最后一首，就跳到第一首
                    songIndex = -1
                }
                let urlPre = window.location.href.split('?id=')[0]//获取歌曲id前的url，替换地址栏url使用
                let nextSong = this.model.albumSongs.songs[songIndex + 1]//得到下一首歌曲的所有信息
                this.view.render(nextSong)//把所有当前页面的所有信息都替换为下一首歌曲的信息（name，src，cover等...）
                this.autoPlayPicOrCover()//还要在调一次检测到音乐播放/暂停是，页面元素自动播放/暂停
                this.model.data = nextSong//替换data.model里面的信息，不替换这个信息，获取的角标数据就永远不会改变
                window.history.pushState(null, null, urlPre + '?id=' + nextSong.id);//改变地址栏url的歌曲id，因为第一步就要查询这个参数，不改变也无法实现下一曲
            })
        })
    })
}

思路其实在注释里面已经写得很清楚了，我是把leancloud上的歌曲id当做查询参数放在ur地址栏里面的，进入歌曲播放页面也是根据这个参数来查询歌曲名、封面、audio的src等信息。

1. 根据地址栏的查询参数获取歌曲id
2. 根据歌曲id，从数据查询到当前歌曲所属的专辑id
3. 使用专辑id，从数据库获取专辑内的所有歌曲
4. 遍历专辑内歌曲id，与当前页面的歌曲id对比，找出当前页面歌曲的length是几，并标记为songIndex角标 （当前歌曲的id我是用的是我当前文件里model的id，使用刚刚从地址栏里得到id应该也可以）
5. 判断一下当前歌曲是不是最后一首，如果是最后一首，就跳到第一首
6. 得到下一首歌曲的所有信息，当点击下一曲时，替换到页面中的所有元素 （地址栏信息，HTML内的封面、歌曲名、播放地址等，以及model内储存的信息）
7. 再监听一下歌曲被播放/暂停时，处理一下封面转动，播放按钮出现/消失

上一曲同理，唯一一点不一样的就是上一曲应该判断的是当前歌曲是否为第一首歌，只需要修改if里面的判断和角标内容内容即可。

 if (songIndex === 0) {
     songIndex = songs.length
 }

let nextSong = this.model.albumSongs.songs[songIndex - 1]