利用vue写一个音乐播放器

前提知识

首先，我们需要认识一个标签

<audio src="..." controls></audio>

直接在src中写入可以获取音频文件的地址就可以直接播放啦
但是，我们的追求当然不仅仅如此，我们需要使用这个东西，写一个美观的，属于自己的音乐播放器，因此，我们需要了解这个标签的一些方法以及属性
1.在vue中如何获取此对象

<audio src="..." ref="audio" controls></audio>

在js中

this.$refs.audio

2.现在我们已经有audio的对象了，里面有什么呢？
我们需要用到的属性有：currentTime
我们需要用到的方法有：play()，pause()
3.另外，他还提供了一些钩子函数
@loadedmetadata：在加载完成后的函数

// 当加载语音流元数据完成后，会触发该事件的回调函数
// 语音元数据主要是语音的长度之类的数据
  onLoadedmetadata(res) {
      this.audio.waiting = false;
      this.audio.maxTime = parseInt(res.target.duration);
  },

@timeupdate:每隔一段时间就会跑一次，你可以用于更新进度条之类的操作
@play：在开始播放的时候运行的函数
@error：播放出错时运行的函数
@waiting：当音频开始等待时运行的函数
@pause：在暂停是运行的函数

万事具备

现在上面的前提知识已经够用了，可以开始动手创作了

首先，我们需要一个进度条，当然你可以自己写，但是我建议去找个模板，我使用的是element框架，里面提供了进度条的组件，我就直接拿来用了

<el-slider v-model="sliderTime" @change="changeCurrentTime"  ></el-slider>

sliderTime为现在的进度，直接输入int类型的数字就可以，changeCurrentTime是改变现在的时间，主要是改变音频播放的时间位置

修改时间

// 播放跳转，注意，这个功能需要服务端支持断点续传或者歌曲本身是静态歌曲才支持此功能，否则会出现只要修改进度就会进度归0的情况
changeCurrentTime(index) {
      this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime);
      this.sliderTime = parseInt(index / 100 * this.audio.maxTime);
  },

注意看，这里有个小坑，上面说的很明白，至于断点续传怎么搞，就自个百度就可以了，很多教程

然后就是开始暂停

就是上面提到的我们需要用到的方法了

this.$refs.audio.play()
this.$refs.audio.pause()

好了，现在可以修改时间一件开始暂停了，如果想要在页面开始的时候加载，就在audio标签中加个autoplay=“true” ，就好了，另外还有单曲循环，随机播放，以及时间显示，这个发挥一下自己的想象力，我相信做出来也不难