介紹

APlayer是一個(gè)簡(jiǎn)約且漂亮的html5音樂(lè)播放器，支持多種模式，包括播放列表模式、吸底模式

、迷你模式、MSE模式、HLS模式。

Github

https://github.com/diygod/APlayer

安裝

使用 npm:

npm install aplayer --save

使用 Yarn:

yarn add aplayer

使用

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg'
    }]});

或者使用模塊化方式

import 'APlayer/dist/APlayer.min.css';
import APlayer from 'APlayer';
const ap = new APlayer(options);

API

• APlayer.version: 靜態(tài)屬性, 返回 APlayer 的版本號(hào)
• ap.play(): 播放音頻
• ap.pause(): 暫停音頻
• ap.seek(time: number): 跳轉(zhuǎn)到特定時(shí)間，時(shí)間的單位為秒
• ap.toggle(): 切換播放和暫停
• ap.on(event: string, handler: function): 綁定音頻和播放器事件，詳情
• ap.volume(percentage: number, nostorage: boolean): 設(shè)置音頻音量
• ap.theme(color: string, index: number): 設(shè)置播放器主題色, index 默認(rèn)為當(dāng)前音頻的 index
• ap.setMode(mode: string): 設(shè)置播放器模式，mode 取值應(yīng)為 'mini' 或 'normal'
• ap.mode: 返回播放器當(dāng)前模式，'mini' 或 'normal'
• ap.notice(text: string, time: number, opacity: number): 顯示通知，時(shí)間的單位為毫秒，默認(rèn)時(shí)間 2000 毫秒，默認(rèn)透明度 0.8，設(shè)置時(shí)間為 0 可以取消通知自動(dòng)隱藏
• ap.skipBack(): 切換到上一首音頻
• ap.skipForward(): 切換到下一首音頻
• ap.destroy(): 銷(xiāo)毀播放器
• ap.lrc-ap.lrc.show(): 顯示歌詞ap.lrc.hide(): 隱藏歌詞ap.lrc.toggle(): 顯示/隱藏歌詞
• ap.list-ap.list.show(): 顯示播放列表ap.list.hide(): 隱藏播放列表ap.list.toggle(): 顯示/隱藏播放列表ap.list.add(audIOS: array | object): 添加一個(gè)或幾個(gè)新音頻到播放列表ap.list.add([{ name: 'name', artist: 'artist', url: 'url.mp3', cover: 'cover.jpg', lrc: 'lrc.lrc', theme: '#ebd0c2' }]); ap.list.remove(index: number): 移除播放列表中的一個(gè)音頻ap.list.remove(1); ap.list.switch(): 切換到播放列表里的其他音頻ap.list.switch(1); ap.list.clear(): 清空播放列表
• ap.audio: 原生 audioap.audio.currentTime: 返回音頻當(dāng)前播放時(shí)間ap.audio.duration: 返回音頻總時(shí)間ap.audio.paused: 返回音頻是否暫停支持大多數(shù)原生audio接口

事件綁定

ap.on(event, handler)

ap.on('ended', function () {
    console.log('player ended');
});

音頻事件

• abort
• canplay
• canplaythrough
• durationchange
• emptied
• ended
• error
• loadeddata
• loadedmetadata
• loadstart
• mozaudioavailable
• pause
• play
• playing
• progress
• ratechange
• seeked
• seeking
• stalled
• suspend
• timeupdate
• volumechange
• waiting

播放器事件

• listshow
• listhide
• listadd
• listremove
• listswitch
• listclear
• noticeshow
• noticehide
• destroy
• lrcshow
• lrchide

總結(jié)

APlayer是一個(gè)不錯(cuò)的HTML5小型音樂(lè)播放器，可以將它嵌入到自己的網(wǎng)頁(yè)中！