一檬洞、安裝依賴

npm install skplayer

二聚霜、創(chuàng)建實(shí)例

<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/小賤、星弟 - 當(dāng)我唱起這首歌.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: '當(dāng)我唱起這首歌',
          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 () {
    // 注意這個(gè)實(shí)例不能直接創(chuàng)建在 created（） 中
    // eslint-disable-next-line no-unused-vars
    const player = new SkPlayer({
      autoplay: true,
      // 可選項(xiàng),自動播放,默認(rèn)為false,true/false
      listshow: true,
      // 可選項(xiàng),列表顯示,默認(rèn)為true,true/false
      mode: 'listloop',
      // 可選項(xiàng),循環(huán)模式,默認(rèn)為'listloop'
      // 'listloop',列表循環(huán)
      // 'singleloop',單曲循環(huán)
      // 可選項(xiàng)配置同上
      music: {
        // 必需項(xiàng),音樂配置
        type: 'file',
        // 必需項(xiàng),自配置文件方式指定填'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>

目前只實(shí)現(xiàn)了自配置音樂文件方式嘶卧，關(guān)于配置網(wǎng)易云音樂歌單方式后續(xù)會持續(xù)更新尔觉。