Core Libraries

APlayer serves as a lightweight, highly customizable HTML5 audio engine, while MetingJS acts as an API wrapper that dynamically fetches tracks from major streaming platforms. Together, they enable seamless music embedding without managing local assets.

Configuration Parameters

MetingJS exposes several global attributes to control playback behavior. Key parameters include:

• server: Target platform (netease, tencent, kugou, xiami, baidu)
• type: Content format (song, playlist, album, search, artist)
• id: Resource identifeir corresponding to the chosen type
• fixed: Pins the player to the bottom corner when enabled
• autoplay / loop / order: Controls initial state, repetition mode (all, one, none), and queue sequence (list, random)
• theme: CSS color value for accent elements
• mutex: Defaults to true; pauses background instances when this player activates
• storage-name: LocalStorage key for persisting user preferences like volume and position
• lrc-type: Controls lyric display mode (0: hidden, 1: desktop widget, 2: inline)
• list-folded: Collapses the tracklist on initial load
• list-max-height: Overrides default scroll container height

Static Implementation

For a persistent player, load dependencies and append the custom element. Ensure required scripts/styles are injected prior to the component declaration.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js 
  server="netease" 
  type="playlist" 
  id="4988098620"
  fixed="true" 
  autoplay="true"
  loop="all"
  order="random"
  preload="auto"
  list-folded="true"
  lrc-type="1"
  list-max-height="500px">
</meting-js>

Platform-Specific ID Resolution

Fetches valid identifiers differ slightly across providers. Locate these values within the browser's address bar or share dialogues:

• Playlists: Navigate to the collection view. The trailing numeric string or alphanumeric hash represents the id. Set type="playlist".
• Single Tracks: Search results display unique hashes. Set type="song". Note that regional licensing restrictions may block certain streams.
• Artists & Albums: Profile pages contain embedded metadata IDs. Artist collections require type="artist", while discographies use type="album".
• Note: Radio broadcasts and audiobooks often lack direct external linking support on some platforms.

Dynamic Randomization Pattern

To rotate sources on each page visit, inject configurations programmatically. This approach maintains clean markup while leveraging client-side randomness.

<div id="audio-target"></div>
<script>
  const targetContainer = document.getElementById('audio-target');
  const baseProps = {
    fixed: 'true',
    autoplay: 'true',
    loop: 'all',
    order: 'random',
    preload: 'auto',
    'list-folded': 'true',
    'lrc-type': '1'
  };

  const library = [
    { server: 'netease', id: '1365053719', type: 'song' },
    { server: 'netease', id: '6452', type: 'artist' },
    { server: 'netease', id: '16959', type: 'album' },
    { server: 'netease', id: '4888271555', type: 'playlist' },
    { server: 'tencent', id: '003FaEB64D0QIa', type: 'playlist' },
    { server: 'tencent', id: '003Nz2So3XXYek', type: 'artist' },
    { server: 'tencent', id: '003yQidc3s7P65', type: 'album' },
    { server: 'kugou', id: '0127069EBDBCF0AD6BF0B60CE873835D', type: 'song' }
  ];

  const selectSource = library[Math.floor(Math.random() * library.length)];
  const playerEl = document.createElement('meting-js');

  Object.keys(baseProps).forEach(key => playerEl.setAttribute(key, baseProps[key]));
  Object.keys(selectSource).forEach(key => playerEl.setAttribute(key, selectSource[key]));

  targetContainer.appendChild(playerEl);
</script>