前言：

之前在移動端使用audio的時候老是有各種問題，尤其是總時長一到移動端就拿不到，這里推薦自己使用的一款移動端音頻組件vue-aplayer

官網入口：https://gitee.com/dreamteam_322/vue-aplayer

目錄：

實作效果（我這里是在樣式里面把功能注釋了）：

實作步驟：

1、安裝：

2、封裝組件 aPlayer.vue ：

3、呼叫

template:

js部分：

官方api檔案：

安裝

Node

CDN

運行時要求

使用

Props

將 Audio 屬性作為 props

音樂資訊

事件

進階使用

自適應主題色

支持 HLS

disableVersionBadge

Slots

實作效果（我這里是在樣式里面把功能注釋了）：

實作步驟：

1、安裝：

cnpm i vue-aplayer --save

2、封裝組件 aPlayer.vue ：

<template>
  <div class="mainPage" ref="MainRef">
    <aplayer
      :autoplay="autoplay"
      :music="songInfo"
      :showLrc="showLrc"
      :mutex="mutex"
      :theme="theme"
      :shuffle="shuffle"
      :repeat="repeat"
      :listFolded="listFolded"
      :listMaxHeight="listMaxHeight"
      :list="list"
      :controls="controls"
      :muted="muted"
      :volume="volume"
      :preload="preload"
    ></aplayer>


  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'
export default {
  props: {
    /**
     *  音頻配置
     * */
    songInfo: {
      type: Object,
      default: () => {
        return {
          title: '', //歌曲名稱
          artist: ' ', //演唱者
          lrc: '', //LRC 歌詞或者歌詞檔案的 URL
          pic: '', //封面圖片 URL
          src: '' //音頻檔案的 URL
        }
      }
    },
    /**
     *  播放串列，如果 list 不是空陣列，播放串列就會顯示出來，即使 list 中只有一首歌并且它和 music 一樣
     * */
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    /**
     *  是否展示歌詞
     * */
    showLrc: {
      type: Boolean,
      default: false
    },
    /**
     *  自動播放，如果多個 mutex 播放器設定了 autoplay，只有第一個會自動播放
     * */
    autoplay: {
      type: Boolean,
      default: false
    },
    /**
     *  顯示原生 audio 元素（在播放器面板和播放串列面板之間）
     * */
    controls: {
      type: Boolean,
      default: false
    },
    /**
     *  靜音
     * */
    muted: {
      type: Boolean,
      default: false
    },
    /**
     *  是否在該播放器播放時暫停其他播放器
     * */
    mutex: {
      type: Boolean,
      default: true
    },
    /**
     *  隨機播放
     * */
    shuffle: {
      type: Boolean,
      default: false
    },
    /**
    *  默認收起播放串列
    * */
    listFolded: {
      type: Boolean,
      default: false
    },
    /**
     *  主題色，如果當前歌曲也設定了 theme 則以歌曲的為準
     * */
    theme: {
      type: String,
      default: '#41b883'
    },
    /**
     *  輪播模式，值可以是 'repeat-one'（單曲回圈）'repeat-all'（串列回圈）或者 'no-repeat'（不回圈），
     *  為了好記，還可以使用對應的 'music' 'list' 'none'
     * */
    repeat: {
      type: String,
      default: 'no-repeat'
    },
    /**
     * 播放串列面板最大高度
     * */
    listMaxHeight: {
      type: String,
      default: ''
    },
    /**
     * 加載音樂的方式可以是“none”“metadata”或“auto”
     * */
    preload: {
      type: String,
      default: 'none'
    },
    /**
     * 播放音量
     * */
    volume: {
      type: Number,
      default: 0.8
    },

  },
  watch: {},
  data() {
    return {

    }
  },
  created() {
  },
  mounted() {
  },
  methods: {

  },
  components: {
    Aplayer
  },
  beforeDestroy() {
  }

}
</script>

<style lang='scss' scoped>
  .mainPage{
    @include wh(100%,84px);
    background: #FCFCFC;
    border: 1px solid #E0E0E0;
    border-radius: 4px;

  }


</style>

3、呼叫

template:

<aPlayer :songInfo="songInfo"/>

js部分：

import aPlayer from '@/components/audio/aPlayer.vue'

components: {
    aPlayer
  },

 data() {
    return {
      // 音頻配置
      songInfo: {
        title: '我愛祖國.map3', //歌曲名稱
        artist: '123', //演唱者
        lrc: '', //LRC 歌詞或者歌詞檔案的 URL
        pic: '', //封面圖片 URL
        src: 'https://music.163.com/song/media/outer/url?id=1466598056.mp3' //音頻檔案的 URL
      }
    }
  },

官方api檔案：

安裝

Node

$ yarn add vue-aplayer

或者如果你選擇 npm

$ npm i vue-aplayer

CDN

<script src="//cdn.jsdelivr.net/npm/vue-aplayer"></script>
<script>
  Vue.component('aplayer', VueAPlayer)
</script>

運行時要求

• Promise
• Fetch API

使用

<aplayer autoplay
  :music="{
    title: 'secret base~君がくれたもの~',
    artist: 'Silent Siren',
    src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
    pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
  }"
/>

// ES6
import Aplayer from 'vue-aplayer'

new Vue({
    components: {
        Aplayer
    }
})

Props

如果你是用的是 Vue@2.3.0+, 你可以在 music shuffle 和 repeat 上使用 .sync 修飾符，

將 Audio 屬性作為 props

從 v1.4.0 開始，我們選取了一些 <audio> 屬性并將它們運用為 props

muted 和 volume 也可以使用 .sync 修飾符，你可以利用這一點做一些自定義的控制

音樂資訊

music props 包含了當前播放歌曲的如下資訊，

事件

從 v1.4.0 開始, Vue-APlayer 會拋出它內部的 <audio> 元素上觸發的所有媒體事件. 你可以查閱 MDN 上的這張完整串列.

在 v1.4.0 以前, 我們有一些自定義事件，如 play pause canplay playing ended error, 它們現在已全部被廢棄，

進階使用

自適應主題色

從 v1.3.0 開始, 如果你將一首歌的 theme 值設為 'pic', Vue-APlayer 會從它的封面圖片中提取顏色作為主題色. 你也可以直接將 Vue-APlayer 的 theme prop 設為 'pic', 這樣所有的歌曲都會使用自適應主題色

你只需將 color-thief 庫加入頁面中.

注意 color-thief 無法正常使用 npm 安裝

<!-- 或者你選擇的其他 CDN -->
<script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>

支持 HLS

從 v1.3.0 開始, Vue-APlayer 可選支持 *.m3u8 音頻. 你需要做的就是在專案中安裝 hls.js 包即可.

disableVersionBadge

Vue-APlayer 默認會在控制臺列印出當前的版本標識，如果你想要禁用它，可以將 disableVersionBadge 設為 true，

import VueAPlayer from 'vue-aplayer'
VueAPlayer.disableVersionBadge = true

Slots

• slot="display"

這個 slot 代表播放器主體上顯示的內容, 默認是滾動歌詞.

這個 slot 中的組件會接收兩個 props: currentMusic 和 playStat.