前端开源库之（2）：音频播放器类

上期我们说完了视频播放器类 这次讲

音频播放器类

音频播放器有哪些？

Aplayer muplayer

本来muplayer是一个很好的播放器，为百度音乐开发的。 只可惜百度音乐后来不用了，GIthub上也找不到了 所以今天主要讲： Aplayer 打开后你会惊奇地发现： 这跟上期讲的（Dplayer）作者一样。 oh，别急先打开它的官网 瞅瞅 Aplayer和Github

oh，哇哦！！！！！！！！ 啥也没发生。

它上面写着“ APlayer_一款可爱/漂亮的Js音乐播放器 网站地址:https://aplayer.js.org/ GitHub:https://github.com/MoePlayer/APlayer 网站描述:一款可爱/漂亮的Js音乐播放器APlayer是MIT许可的开源项目,完全免费”

与介绍“ APlayer是MIT许可的开源项目，完全免费使用。

APlayer支持：

媒体格式

MP4 H.264（AAC或MP3） WAVE PCM Ogg Theora Vorbis

特征 播放列表 歌词

安装

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' }] });

”

接下来放官方API

API APlayer.version: static property, return the version of APlayer ap.play(): play audio ap.pause(): pause audio ap.seek(time: number): seek to specified time, the unit of time is second ap.seek(100); ap.toggle(): toggle between play and pause ap.on(event: string, handler: function): bind audio and player events, see more details ap.volume(percentage: number, nostorage: boolean): set audio volume ap.volume(0.1, true); ap.theme(color: string, index: number): set player theme, the default of index is current audio index ap.theme('#000', 0); ap.setMode(mode: string): set player mode, the value of mode should be 'mini' or 'normal' ap.mode: return current player mode, 'mini' or 'normal' ap.notice(text: string, time: number, opacity: number): show message, the unit of time is millisecond, the default of time is 2000, the default of opacity is 0.8, setting time to 0 can disable notice autohide. ap.notice('Amazing player', 2000, 0.8); ap.skipBack(): skip to previous audio ap.skipForward(): skip to next audio ap.destroy(): destroy player ap.lrc ap.lrc.show(): show lrc ap.lrc.hide(): hide lrc ap.lrc.toggle(): toggle lrc between show and hide ap.list ap.list.show(): show list ap.list.hide(): hide list ap.list.toggle(): toggle list between show and hide ap.list.add(audios: array | object): add new audios to the list ap.list.add([{ name: 'name', artist: 'artist', url: 'url.mp3', cover: 'cover.jpg', lrc: 'lrc.lrc', theme: '#ebd0c2' }]); ap.list.remove(index: number): remove an audio from the list ap.list.remove(1); ap.list.switch(): switch to an audio in the list ap.list.switch(1); ap.list.clear(): remove all audios from the list ap.audio: native audio ap.audio.currentTime: returns the current playback position ap.audio.duration: returns audio total time ap.audio.paused: returns whether the audio paused most native api are supported Event binding ap.on(event, handler) ap.on('ended', function () { console.log('player ended'); }); Audio events abort canplay canplaythrough durationchange emptied ended error loadeddata loadedmetadata loadstart mozaudioavailable pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting Player events listshow listhide listadd listremove listswitch listclear noticeshow noticehide destroy lrcshow lrchide

finish。 下次讲three.js