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

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

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

先上代码（下一曲）：

nextSong() {$('.nextSong').on('click', (e) => {e.preventDefault()let songid = this.view.getSongId()//从查询参数里面获取当前播放的歌曲idthis.model.getAlbumId(songid).then(() => {//根据当前歌曲id查询专辑id（parent属性）let albumid = this.model.albumSongs.id//getAlbumId函数根据当前歌曲id，返回一个专辑idthis.model.getAlbumSongs(albumid).then(() => {//获取到专辑id后，根据专辑id查询专辑里面的所有歌曲let songs = this.model.albumSongs.songslet 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].idsongIndex = 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等信息。

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

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

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

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

使用原生js实现歌曲上一曲/下一曲相关推荐

如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
html鼠标点击有手势出来,用原生js+css3撸的一个下拉手势事件插件
; (function () { var DropDown = function (dropId = 'dropDwon', distance = 60, callBack = () => {} ...
手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
android连接蓝牙控制音乐播放器播放暂停/上一曲/下一曲，且断开蓝牙暂停音乐
客户需求要蓝牙设备可以控制音乐播放器的暂停等操作,当时只做了蓝牙的权限配置,未对这些操作做处理. 1.配置清单文件 <serviceandroid:name=".PlayerServi ...
H5移动端原生JS封装附件上传服务器
本文主要通过原生的js封装附件上传upload.js.可成功内嵌钉钉,ios和安卓端可正常使用,支持单个.多个附件上传. 一.业务需求封装原生JS附件上传,动态创建附件列表,可对附件列表进行删除和新 ...
Android耳机线控-播放/暂停/上一曲/下一曲
起因前一阵子完成了用有线耳机控制Android手机App的音频播放,具体实现了用耳机线的按键完成播放.暂停.上一曲.下一曲的功能.在网上查阅了一些资料,但不是特别尽如人意,记得有一篇写的很不错的这方 ...
原生js实现随机雪花落下特效
原生js随机生成不同数量.速度不同的雪花从屏幕上方落下,可修改各种配置生成自己的雪花特效. var snowStatus = false; var snow1 = './images/snow1.pn ...
html原生上传,一个基于HTML5及原生JS的文件上传组件--JohnUploader
运行效果图一.组件介绍基本特点基于HTML5的FileReader和FormData 可以完成多文件选择,并预览完成文件的异步上传原生XHR对象,适配多浏览器代码 class JohnUp ...
原生js实现图片上传功能
在项目中用到了原生的上传功能,html5代码如下 <div class="uploadimg"><div v-for="(item, index) in ...

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

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

使用原生js实现歌曲上一曲/下一曲相关推荐

最新文章

热门文章