MetingJS Documentation

MetingJS uses the <meting-js> custom element to render music players. You can load music from various platforms, via direct links, or from self-hosted media.

Netease Playlist

Use server="netease", type="playlist", and the playlist id.

Automatic Link Detection

Use the auto attribute with a music link (supports netease, tencent, xiami).

Self-hosted Media

Provide name, artist, url, and cover manually.

Fixed Mode with Lyrics

Set fixed="true" and include lyric text inside a <pre hidden> tag within the <meting-js> element.

<!-- Netease Playlist -->
<meting-js
	server="netease"
	type="playlist"
	id="60198">
</meting-js>

<!-- Automatic Link Detection -->
<meting-js
	auto="https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html">
</meting-js>

<!-- Self-hosted Media -->
<meting-js
	name="rainymood"
	artist="rainymood"
	url="https://rainymood.com/audio1110/0.m4a"
	cover="https://rainymood.com/i/badge.jpg">
</meting-js>

<!-- Fixed Mode with Lyric text -->
<meting-js
	name="rainymood"
	artist="rainymood"
	url="https://rainymood.com/audio1110/0.m4a"
	cover="https://rainymood.com/i/badge.jpg"
	fixed="true">
	<pre hidden>
		[00:00.00]This
		[00:04.01]is
		[00:08.02]lyric
	</pre>
</meting-js>

The <meting-js> component accepts several attributes to define the music source and player behavior. Attributes are automatically camelCased (e.g., lrc-type becomes lrcType).

Music Metadata Attributes

These attributes define the music content:

• server: The music server (e.g., netease, tencent, xiami).
• type: The type of content (e.g., song, album, artist, playlist).
• id: The unique identifier for the music content.
• api: The API endpoint URL. Defaults to https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r if not provided or if window.meting_api is set.
• auth: Authentication token for the API.
• auto: A URL used to automatically detect the server, type, and id via regex patterns.
• name / title: The name of the audio.
• artist / author: The artist of the audio.
• url: Direct URL to the audio file (overrides API-based loading).
• cover / pic: URL to the cover image.
• lyric / lrc: The lyrics text.

APlayer Configuration Attributes

Any other attributes passed to the element are passed directly to the underlying APPlayer instance as configuration options. Common options include:

• mutex: Boolean. If true, only one player can play at a time.
• lrcType: Integer. The type of lyrics rendering (e.g., 3 for standard).
• storageName: String. The name used for local storage.
• auto: Boolean. If true, the component will attempt to parse the auto attribute link.

The <meting-js> element accepts several attributes to control player behavior and appearance.

Required Attributes:

• id: song id / playlist id / album id / search keyword
• server: music platform: netease, tencent, kugou, xiami, baidu
• type: song, playlist, album, search, artist

Optional Attributes:

• auto: music link, support: netease, tencent, xiami
• api: custom api url
• fixed: boolean, enable fixed mode
• mini: boolean, enable mini mode
• autoplay: boolean, audio autoplay
• theme: main color (e.g., #2980b9)
• loop: player loop play, values: 'all', 'one', 'none'
• order: player play order, values: 'list', 'random'
• preload: values: 'none', 'metadata', 'auto'
• volume: default volume (0-1, default 0.7)
• mutex: boolean, prevent playing multiple players at once (default true)
• lrc-type: lyric type
• list-folded: boolean, whether list should be folded at first
• list-max-height: max height of the list (e.g., 340px)
• storage-name: localStorage key for player settings