700字范文 > 开源html5音乐网站一个漂亮的开源HTML5音乐播放器——APlayer

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

时间：2023-01-20 04:23:14

介绍

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

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

Github

/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