开源html5在线音乐网站,一个漂亮的开源HTML5音乐播放器——APlayer

介绍

APlayer是一个简约且漂亮的html5音乐播放器，支持多种模式，包括播放列表模式、吸底模式

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

Github

https://github.com/diygod/APlayer

安装

使用 npm:

npm install aplayer --save

使用 Yarn:

yarn add aplayer

使用

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: 静态属性, 返回 APlayer 的版本号

ap.play(): 播放音频

ap.pause(): 暂停音频

ap.seek(time: number): 跳转到特定时间，时间的单位为秒

ap.toggle(): 切换播放和暂停

ap.on(event: string, handler: function): 绑定音频和播放器事件，详情

ap.volume(percentage: number, nostorage: boolean): 设置音频音量

ap.theme(color: string, index: number): 设置播放器主题色, index 默认为当前音频的 index

ap.setMode(mode: string): 设置播放器模式，mode 取值应为 'mini' 或 'normal'

ap.mode: 返回播放器当前模式，'mini' 或 'normal'

ap.notice(text: string, time: number, opacity: number): 显示通知，时间的单位为毫秒，默认时间 2000 毫秒，默认透明度 0.8，设置时间为 0 可以取消通知自动隐藏

ap.skipBack(): 切换到上一首音频

ap.skipForward(): 切换到下一首音频

ap.destroy(): 销毁播放器

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): 添加一个或几个新音频到播放列表ap.list.add([{ name: 'name', artist: 'artist', url: 'url.mp3', cover: 'cover.jpg', lrc: 'lrc.lrc', theme: '#ebd0c2' }]); ap.list.remove(index: number): 移除播放列表中的一个音频ap.list.remove(1); ap.list.switch(): 切换到播放列表里的其他音频ap.list.switch(1); ap.list.clear(): 清空播放列表

ap.audio: 原生 audioap.audio.currentTime: 返回音频当前播放时间ap.audio.duration: 返回音频总时间ap.audio.paused: 返回音频是否暂停支持大多数原生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

总结

APlayer是一个不错的HTML5小型音乐播放器，可以将它嵌入到自己的网页中！