1.使用html的audio标签

<template>
  <div>
    <aplayer autoplay :music="songs2[0]">
    </aplayer>
    <audio :src="currentSrc" autoplay="" controls="" @ended="nextSong">
    </audio>
    <h2>{{'歌曲:' + this.songs[currentIndex].name}}</h2>
    <p>{{'歌手:' + this.songs[currentIndex].singer}}</p>
    <h3>歌曲列表</h3>
    <ul v-for="(song, index) in songs" :key="song.id">
      <li @click="playMusic(index)" :class="[song.id == currentIndex ? activeClass : '']">{{song.id + '、' +song.name }}</li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'Music',
  data () {
    return {
      songs: [
        {id: 0, name: '漂洋过海来看你', singer: '王丽坤+朱亚文', src: '../../../../static/music/漂洋过海来看你-王丽坤+朱亚文.mp3'},
        {id: 1, name: '绿色', singer: '陈香凝', src: '../../../../static/music/绿色-陈香凝.mp3'},
        {id: 2, name: '清平调', singer: '王菲', src: '../../../../static/music/王菲 - 清平调.mp3'}
      ]
      currentIndex: 0,
      currentSrc: '../../../../static/music/漂洋过海来看你-王丽坤+朱亚文.mp3',
      activeClass: 'active'
    }
  },
  methods: {
    nextSong () {
      // console.log(currentIndex)
      if (this.currentIndex < this.songs.length - 1) {
        this.currentIndex += 1
      } else {
        this.currentIndex = 0
      }
      this.currentSrc = this.songs[this.currentIndex].src
      console.log('currentIndex:' + this.currentIndex)
      console.log('currentSrc:' + this.currentSrc)
    },
    playMusic (id) {
      console.log('id:' + id)
      if (this.currentIndex !== id) {
        this.currentIndex = id
        this.currentSrc = this.songs[this.currentIndex].src
      }
    }
  }
}
</script>

<style scoped>
  ul li {
    cursor: pointer;
    list-style-type: none;
    width: 100px;
  }
  .active {
    background-color: #1989FA;
  }

</style>

效果

2.vue-aplayer

发现html提供的audio标签是无法自动适应屏幕的，从网上找了个vue音乐播放组件vue-aplay
首先cnpm install --save vue-aplayer
然后

<template>
  <div>
    <!--<aplayer autoplay :music="songs2[0]">
    </aplayer>-->
    <audio :src="currentSrc" autoplay="" controls="" @ended="nextSong">
    </audio>
  
  </div>
</template>
import Aplayer from 'vue-aplayer'
export default {
  name: 'Music',
  data () {
    return {
    
      songs2: [
        {id: 0,
          title: '漂洋过海来看你',
          author: '王丽坤+朱亚文',
          url: '../../../../static/music/漂洋过海来看你-王丽坤+朱亚文.mp3',
          pic: '../../../../static/music/music.jpg',
          lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'},
        {id: 1,
          title: '绿色',
          author: '陈香凝',
          url: '../../../../static/music/绿色-陈香凝.mp3',
          pic: '../../../../static/music/music.jpg',
          lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'},
        {id: 2,
          title: '清平调',
          author: '王菲',
          url: '../../../../static/music/王菲 - 清平调.mp3',
          pic: '../../../../static/music/music.jpg',
          lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'}
      ]
    }
  },
  
  
  components: {
    'aplayer': Aplayer
  }
}
</script>

效果

比html的audio好看，而且可以根据屏幕大小变化

vue-aplayer github地址：https://github.com/SevenOutman/vue-aplayer