aplayer-ts
v2.4.5
Published
TypeScript interface for aplayer
Downloads
49
Maintainers
Readme
Wow, such a lovely HTML5 music player
Fully ESM version of APlayer with TypeScript support. With Rollup and esbuild, index.min.js is 50% smaller than the original APlayer.min.js, from 58KB to less than 30KB.
Why this
See this blog post.
- TypeScript
- ESM (APlayer only exports
APlayer.min.js
, which is not friendly to code optimization) - Tree-Shaking, see API difference
# only import APlayer constructor demo_build/index.html 1.95 kB │ gzip: 0.79 kB demo_build/assets/index-3p8iLQ3k.css 10.22 kB │ gzip: 2.19 kB demo_build/assets/index-DDEVMoCF.js 27.37 kB │ gzip: 8.66 kB # import everything demo_build/index.html 1.95 kB │ gzip: 0.79 kB demo_build/assets/index-Bi0rxlmU.css 12.04 kB │ gzip: 2.47 kB demo_build/assets/index-CTXYaVj8.js 30.44 kB │ gzip: 9.23 kB
APlayer.min.js
is still in dist
folder, but by default this package exports src/js/index.js
.
It also includes a patch which fixes APlayer#283.
Usage
Basic usage:
import APlayer from 'aplayer-ts'
import 'aplayer-ts/src/css/base.css'
const instance = APlayer()
.init({ /* refer to the aplayer doc */ })
API difference
fixed
option is removed, useAPlayerFixedModePlugin
instead.
import APlayer, { APlayerFixedModePlugin } from 'aplayer-ts'
import 'aplayer-ts/src/css/base.css'
import 'aplayer-ts/src/css/fixed.css' // remember to import the css
const instance = APlayer()
.use(APlayerFixedModePlugin)
.init({ /* refer to the aplayer doc */ })
list.add
,list.remove
andlist.clear
are by default removed, install their plugins if you want to use:
import APlayer, { addMusicPlugin, removeMusicPlugin, clearMusicPlugin } from 'aplayer-ts'
import 'aplayer-ts/src/css/base.css'
const instance = APlayer()
.use(addMusicPlugin)
.use(removeMusicPlugin)
.init({ /* refer to the aplayer doc */ })
instance.list.add({ /* new audios here */ })
- HLS is by default removed, install
APlayerHlsPlugin
if you want to use:
import APlayer, { APlayerHlsPlugin } from 'aplayer-ts'
import 'aplayer-ts/src/css/base.css'
const instance = APlayer()
.use(APlayerHlsPlugin)
.init({ /* refer to the aplayer doc */ })
Development
Demo website:
pnpm dev # start a dev server
pnpm build:demo # build the demo website (to see output size)
Package build:
pnpm build # ./build/index.{min}.js
APlayer relies on Webpack to import svg and art-template files. This package has already transformed these files into JavaScript code (see utils), so you don't need to worry about the compatibility of your bundler.