Vue实现简单音乐播放

1.使用html的audio标签

效果

2.vue-aplayer

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

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
  }
}

效果

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

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