音乐播放器

后台我们通过访问路径可以访问到mp3文件，那么我现在要在前端访问，并且想播放哪首歌就播放哪首歌，如图：
我已经在播放第四行数据的歌曲了(并且状态是播放的状态。当我点击歌曲图片那一列的第一个播放按钮时，当前播放停止（即第四行停止播放，图标改为没在播放的状态），随即播放第一行数据里的歌曲)

如下图是我mp3文件（以文件路径的格式）储存在数据库中

功能就是这样，那么我们来看看代码是怎么实现的。

• 关于HTML5音频播放器是参考：http://a8pck.cn/Ha16v

//html5音频播放器
<audio id="player" :src="mp3src" 
           controls="controls" 
           preload="auto" 
           autoplay="autoplay" 
           loop="loop" 
           style="display: none">
    </audio>
//src:是你要播放mp3文件的路径
//controls:浏览器为该音频提供播放控件
//preload:是否预加载音频
//autoplay:一旦音频就续就播放该音频
//loop:是否循环播放
// style="display: none":是为了隐藏该控件

• 这是歌曲图片那列

<el-table-column fixed prop="pic" label="歌曲图片" width="157" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.pic" style="height: 60px;width: 60px" />
          <div v-if="toggle!=scope.row.id">
            <i class="el-icon-video-play" style="position: absolute;top: 18px;left:53px;font-size:50px;cursor: pointer" @click="playMusic(scope.row.id,scope.row.url)"></i>
          </div>
          <div v-if="toggle==scope.row.id">
            <i class="el-icon-video-pause" style="position: absolute;top: 18px;left:53px;font-size:50px;cursor: pointer" @click="pauseMusic()"></i>
          </div>
        </template>
      </el-table-column>
 //图片方面就没什么要说的，重点提一下音乐（播放、暂停按钮）图标显示方面：
  <div v-if="toggle!=scope.row.id">
  //播放图标，v-if="toggle!=scope.row.id"，根据toggle的值是否等于这行数据的id的值如果不相等就显示播放图标
     <i class="el-icon-video-play" style="position: absolute;top: 18px;left:53px;font-size:50px;cursor: pointer" @click="playMusic(scope.row.id,scope.row.url)"></i>
   </div>
   <div v-if="toggle==scope.row.id">
   //暂停图标，v-if="toggle==scope.row.id，根据toggle的值是否等于这行数据的id的值如果相等就显示暂停图标图标
      <i class="el-icon-video-pause" style="position: absolute;top: 18px;left:53px;font-size:50px;cursor: pointer" @click="pauseMusic()"></i>
   </div>
   //playMusic:点击播放按钮执行的方法，参数：获取本行数据的id和mp3文件的路径
   //pauseMusic:点击暂停按钮执行的方法，无参数

图标可参考element官网

//vue.js 
  data() {
    return{
      mp3src:"",//mp3文件的路径，初始值为空
      toggle:false,//播放/暂停图标的切换
    }
}

 /*播放音乐*/
    playMusic(id,url){
      this.mp3src=url;//给播放路径传值
      this.toggle=id;//改变播放/暂停图标
      // 获取音乐播放器的id
      var music = document.getElementById("player");
      //调用pause()方法播放音乐
      music.play();
      //注：play（）方法是audio自带方法 
    },
    /*暂停音乐*/
    pauseMusic(){
      this.toggle=false;
      // 获取音乐播放器的id
      var music = document.getElementById("player");
      //调用pause()方法暂停音乐
      music.pause();
      //注：pause（）方法是audio自带方法 
    },