VUE结合原生JavaScript开发音乐播放器

没错这里要说的就是本网站页脚的音乐播放器,包含的功能有音乐列表、进度条、音量控制、播放暂停、上一首、下一首、静音模式。这篇文章主要是为了说明实现的思路。后续的代码只是为了辅助实现。在一些细节上的处理更加精细化,部分代码是不可以直接粘贴使用,需要搭建一些本地的环境或组建,下面废话不多说,开始一段代码的对话:(在文章的最后才会提供全部源码)


没有什么是一张图不能说明的(如果不行!说明你智商欠缺):

播放器的最终效果是这样的。

下面要开始源码了,建议对VUE有一定了解的朋友请滚动你的滚轮往下看,不熟悉的朋友你可以 跳转VUE官网 了。

首先我们要知道使用js来播放音频文件的整个过程,我们不需要使用页面中的audio标签。而是使用JavaScript原生的new Audio()这个方法,实例化一个音频对象,然后通过控制对象属性来处理不同的操作。
在这里我直接在当前组件中实例化了音频文件对象;

  1. let iantooMusic = new Audio()

将整个音乐播放器放在一个组件中,只要路由更新中不卸载组件,音乐会一直播放。此处致敬VUE。

先看模板部分的代码:

每一个按钮是一个单独的图片,都是点击之后执行一个方法,上一首(LastoneM)、下一首(NextoneM),播放或暂停都会执行(musicPlay)方法,通过(music.playBtn)的状态来控制当前播放状态和播放按钮。


进度条模块是使用的input标签的type属性为range设置的精度条,(在低版本的IE上会出现兼容问题而无法显示,或者样式不准确)主要的样式是通过CSS来控制,并不是多个标签的合成,在进度条上绑定了changemousedownmouseup事件,进度条的拖动之后改变值使用change事件来控制,最后是进度时间,进度时间是通过音乐总时间长度,和当前时间计算得来的。而进度条的百分比,也是通过音乐总时间和当前播放时间的s(秒)计算的来,进度条和时间的更新,是一个定时器window.setInterval(function,time)定时刷新进度和时间。

注:这里的mousedownmouseup的主要作用是为了控制当拖动进度条时,不让定时器去更新进度条,而是触发input本身的改变值的操作。当进度发生改变之后change事件,更具百分比计算出应该播放的时间,重新设置进度。


音量图标模块这里只是音量的图标,而音量控制的滑块和进度条一样的方式,这里使用了注入VUE模块volumSet,图标个滑块进行了父 <=> 子组件的双向数据传递。VolumIcoEdit是为了当点击音量图标时,将音量传递给子组件滑块,同时当滑块滑动时,滑动到音量为0时,触发父组件的方法。
音量滑块的组件如下:

最后需要显示的是播放列表,代码如下:

播放列表显示的效果如下:

当你在播放某一首歌的时候,前面会自动添加一个音乐小图标,其实我们组要做的是修改之前实例化的Audio()对象的src属性即可,同时我们需要优化一些细节,进度条的数据会自动重新更新,播放总时间也会自动更新。等…

在这里我们还做了优化,将当前播放的歌曲的id号存放在了sessionStorage中,这样当播放下一首时,我们可以直接拿到上一首或者下一首的播放信息,同时我们也可以通过计算得到列表的循环播放。注:该id并非是后台数据返回的id,而是按照数组顺序进行排列的编号,防止后台数据出现中断现象而发生的错误。

下面我们来分析js模块的处理方式:

1、首先我们需要在当前组件中实例化一个音乐播放的实例对象:

  1. let iantooMusic = new Audio()

2、在VUE组件的data中我们需要存放一些处理的数据,并对一些数据设置了默认值:

3、当组件安装完成之后我们在做处理:

在这里,我们通过了AJAX的方式去后台接口中获取了列表数据,由于不同的ajax插件写法不同,我们这里用到的是vue-resource并挂载到全局模式下使用。

4、同时我们需要在methods中编写的方法也很多,我也用了多张图进行了展示:


这是在播放器组件中的代码。上面已经说明了整体的思路。

最后再说一下音量控制模块的注入组件:

这里用到了父子组件的双向数据流。

最后我把期待已久的源码粘贴出来了(包括一些sass样式文件),注:源码直接复制粘贴之后需要自行修改一些内容,如有疑问的,也可以留言,附上邮箱
源码下载(music.vue)

后记——

关于new Audio()的属性,这里我参考了《JavaScript权威指南》,传说中的犀牛书,详细请参考犀牛书608-615页,

评论: