valaxy-addon-meting

npm

English | 简体中文

Global music player based on APlayer and MetingJS.

Usage ​

ts
import { defineConfig } from 'valaxy'
import { addonMeting } from 'valaxy-addon-meting'

export default defineConfig({
  addons: [
    addonMeting({
      global: true,
      props: {
        id: '2049540645',
        server: 'netease',
        type: 'song',
      },
    }),
  ],
})

Custom API ​

Since the default api.i-meto.com is no longer available, you can set your own Meting API endpoint:

ts
addonMeting({
  global: true,
  props: {
    id: '2049540645',
    server: 'netease',
    type: 'song',
    api: 'https://your-meting-api.example.com/api?server=:server&type=:type&id=:id&r=:r',
  },
})

API URL supports placeholders: :server, :type, :id, :auth, :r

See MetingJS - Advanced Usage for details.

Configuration ​

MetingOptions ​

OptionTypeDefaultDescription
globalbooleanfalseEnable global fixed player on all pages
propsMetingProps—Props for <meting-js> element (MetingJS options)
optionsobject—Addon-specific behaviors (see below)

props (MetingProps) ​

All attributes from MetingJS options:

PropTypeDefaultDescription
idstring—Song / playlist / album ID or search keyword
server'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'—Music platform
type'song' | 'album' | 'artist' | 'playlist' | 'search'—Resource type
autostring—Music link for auto-parsing
apistring—Custom Meting API URL
fixedbooleanfalseEnable fixed (sticky bottom) mode
minibooleanfalseEnable mini mode
autoplaybooleanfalseAudio autoplay
themestring'#2980b9'Theme color
loop'all' | 'one' | 'none''all'Loop mode
order'list' | 'random''list'Play order
preload'auto' | 'metadata' | 'none''auto'Audio preload
volumenumber0.7Default volume
mutexbooleantruePause other players when playing
lrc-typenumber0Lyric type
list-foldedbooleanfalseFold playlist by default
list-max-heightstring'340px'Max height of playlist
storage-namestring'metingjs'localStorage key for player settings

Self-hosted media attributes: name, artist, url, cover.

options ​

OptionTypeDefaultDescription
animationInbooleanfalseEnable slide-in animation on load
autoHiddenbooleanfalseAuto-hide player when collapsed
lyricHiddenbooleanfalseHide lyric panel

Priority ​

Props are resolved in this order (highest to lowest):

  1. Component props (passed directly to <MetingJs>)
  2. Addon props config (from addonMeting({ props: { ... } }))
  3. Built-in defaults

Component Usage ​

Besides the global player, you can use the <MetingJs> component in any page:

vue
<MetingJs id="28391863" server="netease" type="song" />

FAQ ​

  • import 'meting/dist/Meting.min.js' is not working, only CDN works.

Contributors