Quick Start

This page covers the two most common open-source usage paths: CDN embedding and npm-based frontend integration.

Use NMPv3 from a CDN

NMPv3 is the default recommended embed path:

<script src="https://cdn.jsdelivr.net/npm/netease-mini-player-v3@3.0.1/dist/nmpv3.min.js"></script>

<nmp-player
  playlist-id="14273792576"
  theme="auto"
  layout="compact"
></nmp-player>

Pin a version in production:

<script src="https://cdn.jsdelivr.net/npm/netease-mini-player-v3@3.0.1/dist/nmpv3.min.js"></script>

Use NMPv3 from npm

npm install netease-mini-player-v3
pnpm add netease-mini-player-v3

import "netease-mini-player-v3/auto";

<nmp-player
  playlist-id="14273792576"
  theme="auto"
  layout="compact"
></nmp-player>

API proxy

Default API proxy:

https://api.hypcvgm.top/NeteaseMiniPlayer/nmp.php

Custom proxy:

<nmp-player playlist-id="14273792576" api-base-url="/api/netease"></nmp-player>

Global config before the script loads:

<script>
  window.NMPv3Config = {
    apiBaseUrl: "/api/netease",
  };
</script>
<script src="/assets/nmpv3.min.js"></script>

Use NMPv3+

NMPv3+ is for extension-heavy integration. Load the base NMPv3 player first:

npm install netease-mini-player-v3 netease-mini-player-v3-plus
pnpm add netease-mini-player-v3 netease-mini-player-v3-plus

<script src="https://cdn.jsdelivr.net/npm/netease-mini-player-v3@3.0.1/dist/nmpv3.min.js"></script>
<script>
  window.NMPv3PlusConfig = {
    apiBaseUrl: "/api/netease",
    defaultSkin: "default",
  };
</script>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/netease-mini-player-v3-plus@3.0.1/dist/browser.js"
></script>

<nmp-player playlist-id="14273792576" layout="compact"></nmp-player>

Without enabled extensions, Plus keeps the base player surface.

Local development

pnpm install
pnpm --filter netease-mini-player-v3 build
pnpm --filter netease-mini-player-v3-plus build
pnpm docs:dev

Continue reading

• CDN usage
• Custom configuration
• Framework integration