一款极简的HTML5音乐播放器-skPlayer

一、安装依赖

npm install skplayer

二、创建实例

<template>
  <div class="music-player">
    <div class="player-title">音乐播放器</div>
    <div class="player-container">
      <div id="skPlayer"></div>
    </div>
  </div>
</template>

<script>
import shuo from '@/assets/music/小贱 - 说好了不见面.mp3'
import dang from '@/assets/music/小贱、星弟 - 当我唱起这首歌.mp3'
import feng from '@/assets/music/周杰伦 - 枫.mp3'
import SkPlayer from 'skplayer'
export default {
  data () {
    return {
      list: [
        {
          name: '说好了不见面',
          author: '小贱',
          src: shuo,
          cover:
            'https://contentcenter-drcn.dbankcdn.com/pub_1/HW-ucp_GlobalCompetition_100_1/15/v3/YrSmkzgcTc6ZGaReSwRCuw/tEmc-n66TlSO9V0xZI-2AA/thumbnail.jpg'
        },
        {
          name: '当我唱起这首歌',
          author: '小贱',
          src: dang,
          cover:
            'https://contentcenter-drcn.dbankcdn.com/pub_1/HW-ucp_GlobalCompetition_100_1/cc/v3/Dd1PcXSgSzSKf6TXtuB0Uw/qK-wN3jvQqO3pwHxCoo--w/thumbnail.jpg'
        },
        {
          name: '枫',
          author: '杰伦',
          src: feng,
          cover:
            'https://contentcenter-drcn.dbankcdn.com/pub_1/HW-ucp_GlobalCompetition_100_1/a0/v3/HnhqQizWQma_aMO7XVU5Wg/GxqDmew4Rku01PKGUNKWng/thumbnail.jpg'
        }
      ]
    }
  },
  mounted () {
    // 注意这个实例不能直接创建在 created（） 中
    // eslint-disable-next-line no-unused-vars
    const player = new SkPlayer({
      autoplay: true,
      // 可选项,自动播放,默认为false,true/false
      listshow: true,
      // 可选项,列表显示,默认为true,true/false
      mode: 'listloop',
      // 可选项,循环模式,默认为'listloop'
      // 'listloop',列表循环
      // 'singleloop',单曲循环
      // 可选项配置同上
      music: {
        // 必需项,音乐配置
        type: 'file',
        // 必需项,自配置文件方式指定填'file'
        source: this.list
      }
    })
  }
}
</script>

<style lang="less" scoped>
.music-player {
  .player-title {
    margin: 40px 0;
    color: rgb(221, 33, 190);
  }
  .player-container {
    // margin: 0 20px;
    /deep/ #skPlayer {
      display: inline-block;
      .skPlayer-picture {
        .skPlayer-cover {
          height: 100%;
        }
      }
    }
  }
}
</style>

目前只实现了自配置音乐文件方式，关于配置网易云音乐歌单方式后续会持续更新。