天天看點
傳回

vue-aplayer的api詳細講解目錄：一、安裝二、快速開始三、具體配置參數四、外部調用他本身的方法五、自身的方法事件六、歌詞七、播放清單等等，這裡隻整理下常用的，更多詳細的請看 入口

前言：

      vue-aplayer的api介紹

來源：入口

更多 ： 英文源碼

目錄：

一、安裝

使用 npm

使用 yarn 推薦

二、快速開始

傳統方式

vue中使用：點我進入詳細步驟

三、具體配置參數

fixed 可選

mini 可選

autoplay 可選

theme 可選

loop 可選

order 可選

preload 可選

volume 可選

audio 必填

#customAudioType 可選

mutex 可選

lrcType 可選

listFolded 可選

listMaxHeight 可選

storageName 可選

四、外部調用他本身的方法

version 靜态

#media 執行個體

#currentMusic 執行個體

#play() 執行個體

#pause() 執行個體

#toggle() 執行個體

#seek() 執行個體

#switch() 執行個體

#skipBack() 執行個體

#skipForward() 執行個體

#showNotice() 執行個體

#showLrc() 執行個體

#hideLrc() 執行個體

#toggleLrc() 執行個體

#showList() 執行個體

#hideList() 執行個體

#toggleList() 執行個體

五、自身的方法事件

#原生 Media 事件

#播放器事件

六、歌詞

LRC 格式

#LRC 檔案

#LRC 字元串

#禁用歌詞

七、播放清單

等等，這裡隻整理下常用的，更多詳細的請看 入口

一、安裝

使用 npm 

npm install @moefe/vue-aplayer --save

使用 yarn 推薦 

yarn add @moefe/vue-aplayer

二、快速開始

傳統方式 

<html>
  <body>
    <!-- prettier-ignore -->
    <div id="app">
      <a-player :audio="audio" :lrc-type="3"></a-player>
    </div>
  </body>
  <!-- 你必須在引入 vue-aplayer 之前引入 vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/@moefe/vue-aplayer"></script>
  <script>
    Vue.use(VueAPlayer, {
      defaultCover: 'https://github.com/u3u.png',
      productionTip: true,
    });

    new Vue({
      el: '#app',
      data: {
        audio: {
          name: '東西（Cover：林俊呈）',
          artist: '納豆',
          url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
          cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
        },
      },
    });
  </script>
</html>

vue中使用：點我進入詳細步驟

三、具體配置參數

fixed 可選

  • 類型：

    boolean?
  • 預設值：

    false
  • 描述：是否開啟吸底模式

mini 可選

提示

如果開啟吸底模式，該選項可以控制播放器展開或收起

  • 類型：

    boolean?
  • 預設值：

    false
  • 描述：是否開啟迷你模式

autoplay 可選

注意

由于大多數移動端浏覽器禁止了音頻自動播放，是以該選項在移動端無效

  • 類型：

    boolean?
  • 預設值：

    false
  • 描述：是否開啟自動播放

theme 可選

提示

你可以選擇引入 color-thief 讓播放器根據封面圖檔自動擷取主題顔色

  • 類型：

    string?
  • 預設值：

    #b7daff
  • 描述：設定播放器預設主題顔色

loop 可選

注意

由于播放器會儲存使用者的使用習慣，是以播放器首次初始化之後該選項将失效

  • 類型：

    APlayer.LoopMode?
  • 預設值：

    all
  • 描述：設定播放器的初始循環模式 
declare namespace APlayer {
  export type LoopMode = 'all' | 'one' | 'none';
}

order 可選

注意

由于播放器會儲存使用者的使用習慣，是以播放器首次初始化之後該選項将失效

  • 類型：

    APlayer.OrderMode?
  • 預設值：

    list
  • 描述：設定播放器的初始順序模式 
declare namespace APlayer {
  export type OrderMode = 'list' | 'random';
}

preload 可選

  • 類型：

    APlayer.Preload?
  • 預設值：

    auto
  • 描述：設定音頻的預加載模式 
declare namespace APlayer {
  export type Preload = 'none' | 'metadata' | 'auto';
}

volume 可選

  • 類型：

    number?
  • 預設值：

    0.7
  • 描述：設定播放器的音量

audio 必填

  • 類型：

    APlayer.Audio | Array<APlayer.Audio>
  • 預設值：

    undefined
  • 描述：設定要播放的音頻對象或播放清單 
declare namespace APlayer {
  export type AudioType = 'auto' | 'hls' | 'normal';
  export interface Audio {
    id?: number; // 音頻 id
    name: string | VNode; // 音頻名稱
    artist: string | VNode; // 音頻藝術家
    url: string; // 音頻播放位址
    cover: string; // 音頻封面
    lrc?: string; // lrc 歌詞
    theme?: string; // 單曲主題色，它将覆寫全局的預設主題色
    type?: AudioType; // 指定音頻的類型
    speed?: number; // 單曲播放速度
  }
}

點選加載播放器

這裡與 APlayer 不同的是新增了 

id

 和 

speed

 屬性。

id

 預設情況下由播放器自動生成，你也可以手動傳一個 

id

 來覆寫它。

speed

 屬性可以指定該音頻的播放速度。

注意

id

 是用來區分音頻的唯一辨別，不允許重複，如果出現重複可能會導緻播放器出現異常。

預設情況下 

id

 是根據播放清單的索引生成，當播放清單發生變化時 (新增/删除) 會重新生成。

當你從播放清單中删除音頻時，由于播放清單發生了變化，是以會導緻目前音頻的 

id

 與删除後的播放清單不比對。 出現這種情況時，會降級根據 

url

 更新目前音頻的資訊，如果播放清單中每一項的 

url

 都是唯一的，那麼不會有問題。 如果有重複的 

url

，你必須設定音頻的 

id

 屬性，以確定每一項都是唯一的，否則播放器可能出現異常。

#customAudioType 可選

  • 類型：

    { [index: string]: Function }?
  • 預設值：

    undefined
  • 描述：自定義音頻類型

📝 example.vue

<template>
  <aplayer :audio="audio" :customAudioType="customAudioType" :lrcType="3" />
</template>

<script>
import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer);

export default {
  data() {
    return {
      audio: {
        name: 'Let It Go.m3u8',
        artist: 'Idina Menzel',
        url: 'https://cdn.moefe.org/music/hls/frozen.m3u8',
        cover: 'https://p1.music.126.net/n72JJkPg2-ENxhB-DsZ2AA==/109951163115400390.jpg?param=300y300', // prettier-ignore
        lrc: 'https://cdn.moefe.org/music/lrc/frozen.lrc',
        type: 'customHls',
      },
      customAudioType: {
        customHls(audioElement, audio, player) {
          if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(audio.url);
            hls.attachMedia(audioElement);
          } else if (
            audioElement.canPlayType('application/x-mpegURL') ||
            audioElement.canPlayType('application/vnd.apple.mpegURL')
          ) {
            audioElement.src = audio.url;
          } else {
            player.showNotice('Error: HLS is not supported.');
          }
        },
      },
    };
  },
};
</script>

mutex 可選

  • 類型：

    boolean?
  • 預設值：

    true
  • 描述：是否開啟互斥模式

如果開啟則會阻止多個播放器同時播放，目前播放器播放時暫停其他播放器

lrcType 可選

  • 類型：

    APlayer.LrcType?
  • 預設值：
  • 描述：設定 lrc 歌詞解析模式 
declare namespace APlayer {
  export enum LrcType {
    file = 3, // 表示 audio.lrc 的值是 lrc 檔案位址，将通過 `fetch` 擷取 lrc 歌詞文本
    html = 2, // 不支援 html 用法
    string = 1, // 表示 audio.lrc 的值是 lrc 格式的字元串，将直接通過它解析歌詞
    disabled = 0, // 禁用 lrc 歌詞
  }
}

listFolded 可選

注意

由于播放器會儲存使用者的使用習慣，是以播放器首次初始化之後該選項将失效

  • 類型：

    boolean?
  • 預設值：

    false
  • 描述：是否折疊播放清單

listMaxHeight 可選

  • 類型：

    number?
  • 預設值：

    250
  • 描述：設定播放清單最大高度，機關為像素

storageName 可選

  • 類型：

    string?
  • 預設值：

    aplayer-setting
  • 描述：設定存儲播放器設定的 

    localStorage

      key

四、外部調用他本身的方法

version 靜态

  • 類型：

    string
  • 描述：隻讀屬性，傳回 APlayer 的版本号
  • 用法： 
import { APlayer } from '@moefe/vue-aplayer';

console.log(APlayer.version);

#media 執行個體

  • 類型：

    APlayer.Media
  • 描述：隻讀的原生 

    Media

      對象
  • 用法： 
const { media } = this.$refs.aplayer;

console.log(media.currentTime); // 擷取音頻目前播放時間
console.log(media.duration); // 擷取音頻總時間
console.log(media.paused); // 擷取音頻是否暫停

#currentMusic 執行個體

警告

如果你想切換到播放清單中的其他音頻請使用 

switch

 方法，而不要直接設定它

  • 類型：

    APlayer.Audio
  • 描述：擷取目前正在播放的音頻
  • 用法： 
console.log(this.$refs.aplayer.currentMusic);

#play() 執行個體

  • 類型：

    Function
  • 傳回值：

    Promise<void>
  • 描述：播放音頻
  • 用法： 
this.$refs.aplayer.play();

#pause() 執行個體

  • 類型：

    Function
  • 傳回值：

    void
  • 描述：暫停音頻
  • 用法： 
this.$refs.aplayer.pause();

#toggle() 執行個體

  • 類型：

    Function
  • 傳回值：

    void
  • 描述：切換播放和暫停
  • 用法： 
this.$refs.aplayer.toggle();

#seek() 執行個體

  • 類型：

    Function
  • 參數：

    • time
      • 類型：

        number
      • 描述：時間（秒）
  • 傳回值：

    void
  • 描述：跳到特定時間
  • 用法： 
this.$refs.aplayer.seek(100);

#switch() 執行個體

  • 類型：

    Function
  • 參數：

    • audio
      • 類型：

        number

          | 

        string
      • 描述：音頻索引或音頻的部分名稱
  • 傳回值：

    void
  • 描述：切換到播放清單中的其他音頻
  • 用法： 
this.$refs.aplayer.switch(1); // 切換到播放清單中的第二首歌
this.$refs.aplayer.switch('東西'); // 切換到播放清單中歌曲名包含“東西”的第一首歌

#skipBack() 執行個體

  • 類型：

    Function
  • 傳回值：

    void
  • 描述：切換到上一首音頻
  • 用法： 
this.$refs.aplayer.skipBack();

#skipForward() 執行個體

  • 類型：

    Function
  • 傳回值：

    void
  • 描述：切換到下一首音頻
  • 用法： 
this.$refs.aplayer.skipForward();

#showNotice() 執行個體

  • 類型：

    Function
  • 參數：

    • text
      • 類型：

        string
      • 描述：通知文本

    • time
      • 類型：

        number?
      • 預設值：2000
      • 描述：顯示時間（毫秒）

    • opacity
      • 類型：

        number?
      • 預設值：0.8
      • 描述：通知透明度 (0 ~ 1)
  • 傳回值：

    Promise<void>
  • 描述：顯示通知，設定時間為 0 可以取消通知自動隐藏
  • 用法： 
this.$refs.aplayer.showNotice('喵喵喵');

#showLrc() 執行個體

  • 類型：

    Function
  • 傳回值：

    void
  • 描述：顯示歌詞
  • 用法： 
this.$refs.aplayer.showLrc();

#hideLrc() 執行個體

  • 類型：

    Function
  • 傳回值：

    void
  • 描述：隐藏歌詞
  • 用法： 
this.$refs.aplayer.hideLrc();

#toggleLrc() 執行個體

  • 類型：

    Function
  • 傳回值：

    void
  • 描述：顯示/隐藏歌詞
  • 用法： 
this.$refs.aplayer.toggleLrc();

#showList() 執行個體

  • 類型：

    Function
  • 傳回值：

    void
  • 描述：顯示播放清單
  • 用法： 
this.$refs.aplayer.showList();

#hideList() 執行個體

  • 類型：

    Function
  • 傳回值：

    void
  • 描述：隐藏播放清單
  • 用法： 
this.$refs.aplayer.hideList();

#toggleList() 執行個體

  • 類型：

    Function
  • 傳回值：

    void
  • 描述：顯示/隐藏播放清單
  • 用法： 
this.$refs.aplayer.toggleList();

五、自身的方法事件

提示

跟元件和 prop 不同，事件名不會被用作一個 JavaScript 變量名或屬性名，是以就沒有理由使用 camelCase 或 PascalCase 了。 并且 v-on 事件監聽器在 DOM 模闆中會被自動轉換為全小寫 (因為 HTML 是大小寫不敏感的)，是以在 DOM 模闆中請始終使用全小寫監聽事件。

#原生 Media 事件

事件名稱 描述
onAbort 在退出時觸發
onCanplay 當檔案就緒可以開始播放時觸發（緩沖已足夠開始時）
onCanplaythrough 當媒介能夠無需因緩沖而停止即可播放至結尾時觸發
onDurationchange 當媒介長度改變時觸發
onEmptied 當發生故障并且檔案突然不可用時觸發（比如連接配接意外斷開時）
onEnded 當媒介已到達結尾時觸發（可發送類似“感謝觀看”之類的消息）
onError 當在檔案加載期間發生錯誤時觸發
onLoadeddata 當媒介資料已加載時觸發
onLoadedmetadata 當中繼資料（比如分辨率和時長）被加載時觸發
onLoadstart 在檔案開始加載且未實際加載任何資料前觸發
onPause 當媒介被使用者或程式暫停時觸發
onPlay 當媒介已就緒可以開始播放時觸發
onPlaying 當媒介已開始播放時觸發
onProgress 當浏覽器正在擷取媒介資料時觸發
onRatechange 每當回放速率改變時觸發（比如當使用者切換到慢動作或快進模式）
onReadystatechange 每當就緒狀态改變時觸發（就緒狀态監測媒介資料的狀态）
onSeeked 當 seeking 屬性設定為 false（訓示定位已結束）時觸發
onSeeking 當 seeking 屬性設定為 true（訓示定位是活動的）時觸發
onStalled 在浏覽器不論何種原因未能取回媒介資料時觸發
onSuspend 在媒介資料完全加載之前不論何種原因終止取回媒介資料時觸發
onTimeupdate 當播放位置改變時觸發
onVolumechange 每當音量改變時（包括将音量設定為靜音）時觸發
onWaiting 當媒介已停止播放但打算繼續播放時觸發

📝 example.vue

<template>
  <aplayer
    :audio="audio"
    @abort="handleEvent"
    @canplay="handleEvent"
    @canplaythrough="handleEvent"
    @durationchange="handleEvent"
    @emptied="handleEvent"
    @ended="handleEvent"
    @error="handleEvent"
    @loadeddata="handleEvent"
    @loadedmetadata="handleEvent"
    @loadstart="handleEvent"
    @pause="handleEvent"
    @play="handleEvent"
    @playing="handleEvent"
    @progress="handleEvent"
    @ratechange="handleEvent"
    @readystatechange="handleEvent"
    @seeked="handleEvent"
    @seeking="handleEvent"
    @stalled="handleEvent"
    @suspend="handleEvent"
    @timeupdate="handleEvent"
    @volumechange="handleEvent"
    @waiting="handleEvent"
  />
</template>

<script>
import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer);

export default {
  data() {
    return {
      audio: {
        name: '東西（Cover：林俊呈）',
        artist: '納豆',
        url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
        cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
        lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
      },
    };
  },
  methods: {
    handleEvent(e) {
      console.log(e);
    },
  },
};
</script>

#播放器事件

事件名稱 描述
onListShow 播放清單顯示時觸發
onListHide 播放清單隐藏時觸發
onListAdd 播放清單新增音頻時觸發
onListRemove 播放清單删除音頻時觸發
onListClear 播放清單清空時觸發
onListSwitch 切換播放的音頻時觸發
onNoticeShow 通知消息顯示時觸發
onNoticeHide 通知消息隐藏時觸發
onLrcShow 歌詞面闆顯示時觸發
onLrcHide 歌詞面闆隐藏時觸發

注意

由于某些選項會通過使用者的操作直接修改，如果你傳遞了它們，會導緻雙向綁定的值不一緻。

如果你想同步它們，可以通過監下面的事件來操作。你也可以使用 .sync 修飾符 來同步。

事件名稱 描述
update:volume 修改音量時觸發，用于同步 

volume

  選項
update:mini 修改迷你模式時觸發，用于同步 

mini

  選項
update:loop 修改循環模式時觸發，用于同步 

loop

  選項
update:order 修改順序模式時觸發，用于同步 

order

  選項
update:listFolded 播放清單展開/隐藏時觸發，用于同步 

listFolded

  選項

📝 example.vue

<template>
  <aplayer
    :audio="audio"
    :volume.sync="volume"
    :mini.sync="mini"
    :loop.sync="loop"
    :order.sync="order"
    :listFolded.sync="listFolded"
    @listShow="handleEvent"
    @listHide="handleEvent"
    @listAdd="handleEvent"
    @listRemove="handleEvent"
    @listClear="handleEvent"
    @listSwitch="handleEvent"
    @noticeShow="handleEvent"
    @noticeHide="handleEvent"
    @lrcShow="handleEvent"
    @lrcHide="handleEvent"
  />
</template>

<script>
import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer);

export default {
  data() {
    return {
      audio: {
        name: '東西（Cover：林俊呈）',
        artist: '納豆',
        url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
        cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
        lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
      },
      volume: 0.7,
      mini: false,
      loop: 'all',
      order: 'list',
      listFolded: false,
    };
  },
  methods: {
    handleEvent() {
      console.log('Meow~');
    },
  },
};
</script>

六、歌詞

LRC 格式 

[ti:歌詞(歌曲)的标題]
[al:本歌所在的唱片集]
[ar:演出者-歌手]
[au:歌詞作者-作曲家]
[by:此LRC檔案的建立者]
[offset:+/- 以毫秒為機關加快或延後歌詞的播放]

[re:建立此LRC檔案的播放器或編輯器]
[ve:程式的版本]

[mm:ss.ms] 我們一起學貓叫
[mm:ss.ms][mm:ss:ms] 一起喵喵喵喵喵
...

檢視維基百科了解更多：https://zh.wikipedia.org/wiki/LRC格式

#LRC 檔案

點選加載播放器

📝 example.vue

<template>
  <!--
    指定 lrcType 為 3，表示 audio.lrc 的值是 lrc 檔案位址，
    将通過 `fetch` 擷取 lrc 歌詞文本。
  -->
  <aplayer audio=":audio" :lrcType="3" />
</template>

<script>
import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer);

export default {
  data() {
    return {
      audio: {
        name: '啵唧',
        artist: 'Hanser',
        url: 'https://cdn.moefe.org/music/mp3/kiss.mp3',
        cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300', // prettier-ignore
        lrc: 'https://cdn.moefe.org/music/lrc/kiss.lrc',
      },
    };
  },
};
</script>

#LRC 字元串

點選加載播放器

📝 example.vue

<template>
  <!-- 指定 lrcType 為 1，表示 audio.lrc 的值是 lrc 字元串 -->
  <aplayer :audio="audio" :lrcType="1" />
</template>

<script>
import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer);

export default {
  data() {
    return {
      audio: {
        name: '啵唧',
        artist: 'Hanser',
        url: 'https://cdn.moefe.org/music/mp3/kiss.mp3',
        cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300', // prettier-ignore
        lrc: '[00:00.00] 我們一起學貓叫\n[99:99.99] 一起喵喵喵喵喵',
      },
    };
  },
};
</script>

#禁用歌詞

點選加載播放器

📝 example.vue

<template>
  <!-- 指定 lrcType 為 0，表示禁用歌詞 -->
  <aplayer :audio="audio" :lrcType="0" />
</template>

<script>
import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer);

export default {
  data() {
    return {
      audio: {
        name: '啵唧',
        artist: 'Hanser',
        url: 'https://cdn.moefe.org/music/mp3/kiss.mp3',
        cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300' // prettier-ignore
      },
    };
  },
};
</script>

七、播放清單

點選加載播放器

📝 example.vue

<template>
  <aplayer :audio="audio" :lrcType="3" />
</template>

<script>
import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer);

export default {
  data() {
    return {
      audio: [
        {
          name: '東西（Cover：林俊呈）',
          artist: '納豆',
          url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
          cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
        },
        {
          name: '響喜亂舞（Cover：MARiA）',
          artist: '泠鸢yousa',
          url: 'https://cdn.moefe.org/music/mp3/kyoukiranbu.mp3',
          cover: 'https://p1.music.126.net/AUGVPQ_rVrngDH9ocQrn3Q==/109951163613037822.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/kyoukiranbu.lrc',
        },
        {
          name: '啵唧',
          artist: 'Hanser',
          url: 'https://cdn.moefe.org/music/mp3/kiss.mp3',
          cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/kiss.lrc',
        },
      ],
    };
  },
};
</script>

等等，這裡隻整理下常用的，更多詳細的請看 入口

vue-插件 vue vue-aplayer audio
上一篇: 網際網路家裝的困局與破局
下一篇: MacBook下每次SourceTree每次拉取代碼都要輸入密碼解決辦法

繼續閱讀