[NMP v2] NeteaseMiniPlayer v2 使用文档

主题

使用示例 ​

本页面提供了 NeteaseMiniPlayer v2 (NMP v2) 的使用示例，帮助你快速上手并应用到实际项目中。

🎵 播放器模式说明 ​

浮动模式 (Floating Mode) ​

  • 特点：悬浮在页面四个角落的小播放器
  • 功能：支持播放歌单，可以切换上一首/下一首，可以缩小
  • 适用场景：网站全局音乐播放，不影响页面内容阅读
  • 参数：data-embed="false"

嵌入模式 (Embed Mode) ​

  • 特点：嵌入到页面内容中的播放器
  • 功能：只播放单首歌曲，类似网易云官方嵌入式播放器
  • 适用场景：维基百科、博客文章中引用特定音乐
  • 参数：data-embed="true"

📋 基础示例 ​

浮动模式播放器 ​

适合作为网站全局音乐播放器：

html
<link rel="stylesheet" href="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css">
<div class="netease-mini-player" 
     data-playlist-id="14273792576" 
     data-embed="false" 
     data-position="bottom-right" 
     data-theme="auto">
</div>
<script src="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.js"></script>

位置选项：

  • bottom-right：右下角（默认）
  • bottom-left：左下角
  • top-right：右上角
  • top-left：左上角

嵌入模式播放器 ​

适合在文章中引用特定歌曲：

html
<link rel="stylesheet" href="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css">
<div class="netease-mini-player" 
     data-song-id="1823012873" 
     data-embed="true" 
     data-theme="auto">
</div>
<script src="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.js"></script>

🔧 Vue.js 集成 ​

基础用法 ​

vue
<template>
  <div>
    <!-- 浮动播放器 -->
    <div class="netease-mini-player" 
         :data-playlist-id="playlistId"
         data-embed="false"
         data-position="bottom-right"
         data-theme="auto">
    </div>
    
    <!-- 嵌入播放器 -->
    <div class="netease-mini-player" 
         :data-song-id="songId"
         data-embed="true"
         data-theme="auto">
    </div>
  </div>
</template>

<script>
export default {
  name: 'MusicPlayer',
  data() {
    return {
      playlistId: '14273792576',
      songId: '1823012873'
    }
  },
  mounted() {
    // 动态加载播放器资源
    this.loadPlayerResources();
  },
  methods: {
    loadPlayerResources() {
      // 加载 CSS
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css';
      document.head.appendChild(link);
      
      // 加载 JS
      const script = document.createElement('script');
      script.src = 'https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.js';
      document.body.appendChild(script);
    }
  }
}
</script>

Vue 3 Composition API ​

vue
<template>
  <div>
    <div class="netease-mini-player" 
         :data-playlist-id="playlistId"
         data-embed="false"
         data-position="bottom-right">
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const playlistId = ref('14273792576')

onMounted(() => {
  // 加载播放器资源
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = 'https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css'
  document.head.appendChild(link)
  
  const script = document.createElement('script')
  script.src = 'https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.js'
  document.body.appendChild(script)
})
</script>

📝 WordPress 集成 ​

方法一：主题集成 ​

在主题的 functions.php 文件中添加：

php
<?php
// 加载播放器资源
function add_netease_player_scripts() {
    wp_enqueue_style('netease-player-css', 'https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css');
    wp_enqueue_script('netease-player-js', 'https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.js', array(), '2.0.0', true);
}
add_action('wp_enqueue_scripts', 'add_netease_player_scripts');

// 添加短代码支持
function netease_player_shortcode($atts) {
    $atts = shortcode_atts(array(
        'playlist-id' => '',
        'song-id' => '',
        'embed' => 'false',
        'position' => 'bottom-right',
        'theme' => 'auto'
    ), $atts);
    
    $data_attrs = '';
    foreach ($atts as $key => $value) {
        if (!empty($value)) {
            $data_attrs .= ' data-' . esc_attr($key) . '="' . esc_attr($value) . '"';
        }
    }
    
    return '<div class="netease-mini-player"' . $data_attrs . '></div>';
}
add_shortcode('netease_player', 'netease_player_shortcode');
?>

方法二：在文章中使用 ​

html
<!-- 浮动播放器 -->
[netease_player playlist-id="14273792576" embed="false" position="bottom-right"]

<!-- 嵌入播放器 -->
[netease_player song-id="1823012873" embed="true"]

📖 Hexo 集成 ​

创建标签插件 ​

在 Hexo 博客的 scripts 目录下创建 netease-player.js：

javascript
// scripts/netease-player.js
hexo.extend.tag.register('netease_player', function(args) {
    const options = {};
    
    // 解析参数
    args.forEach(arg => {
        const [key, value] = arg.split('=');
        if (key && value) {
            options[key] = value.replace(/['"]/g, '');
        }
    });
    
    // 构建 data 属性
    let dataAttrs = '';
    Object.keys(options).forEach(key => {
        dataAttrs += ` data-${key}="${options[key]}"`;
    });
    
    return `<div class="netease-mini-player"${dataAttrs}></div>`;
});

// 注入资源文件
hexo.extend.injector.register('head_end', () => {
    return '<link rel="stylesheet" href="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css">';
});

hexo.extend.injector.register('body_end', () => {
    return '<script src="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.js"></script>';
});

在 Markdown 中使用 ​

markdown
<!-- 浮动播放器 -->
{% netease_player playlist-id=14273792576 embed=false position=bottom-right %}

<!-- 嵌入播放器 -->
{% netease_player song-id=1823012873 embed=true %}

🎛️ 多播放器管理 ​

当页面需要多个嵌入式播放器时：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多播放器示例</title>
    <link rel="stylesheet" href="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css">
    <style>
        .music-section {
            margin: 30px 0;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        
        .music-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .music-description {
            color: #666;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>音乐文章示例</h1>
        
        <div class="music-section">
            <div class="music-title">嵌入播放器 1 </div>
            <div class="music-description">明亮主题</div>
            
            <!-- 嵌入播放器 1 -->
            <div class="netease-mini-player" 
                 data-song-id="1823012873"
                 data-embed="true"
                 data-theme="light">
            </div>
        </div>
        
        <div class="music-section">
            <div class="music-title">嵌入播放器 2</div>
            <div class="music-description">自动模式</div>
            
            <!-- 嵌入播放器 2 -->
            <div class="netease-mini-player" 
                 data-song-id="1347230324"
                 data-embed="true"
                 data-theme="auto">
            </div>
        </div>
        
        <div class="music-section">
            <div class="music-title">嵌入播放器 3</div>
            <div class="music-description">深色主题</div>
            
            <!-- 嵌入播放器 3 -->
            <div class="netease-mini-player" 
                 data-song-id="29732992"
                 data-embed="true"
                 data-theme="dark">
            </div>
        </div>
    </div>
    
    <script src="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.js"></script>
</body>
</html>

🎨 主题配置 ​

播放器支持三种主题：

  • light：浅色主题
  • dark：深色主题
  • auto：自动跟随系统主题（推荐）
html
<!-- 浅色主题 -->
<div class="netease-mini-player" data-theme="light" ...></div>

<!-- 深色主题 -->
<div class="netease-mini-player" data-theme="dark" ...></div>

<!-- 自动主题 -->
<div class="netease-mini-player" data-theme="auto" ...></div>

📱 响应式支持 ​

播放器自动适配移动设备，无需额外配置。在移动设备上：

  • 浮动播放器会自动调整大小和位置
  • 嵌入播放器会适配容器宽度
  • 触摸操作完全支持

🔗 在线配置工具 ​

使用我们的在线可视化配置工具来快速生成播放器代码，支持实时预览和参数调整。

Copyright © 2025 NeteaseMiniPlayer

BHCN STUDIO 所有权利保留