当前位置：首页 > news >正文

在Vue项目的引入meting-js音乐播放器插件

news 来源：原创 2025/9/10 18:43:00

开源项目：https://github.com/swzaaaaaaa/NBlog

1、开源项目中音乐播放插件的使用流程

步骤1：下载`meting-js`相关文件

在MetingJS官方仓库或其他可靠的CDN获取meting-js的JavaScript文件以及相关依赖（如APlayer的文件）。将它们下载到项目的public文件夹下，并放在public/js文件夹中。

步骤2：在`index.html`中引入文件

在public/index.html文件中，通过<script>标签引入meting-js及其依赖。在<head>标签内添加以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title>NBlog</title><link rel="stylesheet" href="<%= BASE_URL %>lib/css/prism.css"><link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css">
</head>
<body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="<%= BASE_URL %>lib/js/prism.js" data-manual></script><script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script><!-- <script> 这个是自己搭建的api，为了防止官方api有问题导致，这里是原作者搭建的，但是有时也有问题，所以我就注释了。（如果需要，后续自己再尝试搭建）var meting_api='https://api.naccl.top/meting/api?server=:server&type=:type&id=:id&auth=:auth&r=:r';</script> --><script src="<%= BASE_URL %>lib/js/Meting.min.js"></script><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/tocbot/4.6.0/tocbot.min.js"></script>
</body>
</html>

步骤3：在index.vue组件中使用

在需要使用音乐播放器的Vue组件中，可以直接在模板中使用<meting-js>标签，就像之前全局引入的方式一样。

通过这种方式，meting-js被引入到整个项目中，并且可以在多个Vue组件中使用。不过需要注意的是，这种方式下meting-js及其依赖的文件会在页面加载时就被全部加载，可能会影响页面的初始加载性能。如果项目对性能要求较高，可以考虑对这些文件进行优化，如压缩、按需加载等。

2、meting-js插件的使用

在使用 <meting-js> 标签时，可以通过设置一系列参数来定制音乐播放器的功能和外观。以下是一些常用参数及其说明：

音乐源相关参数

参数名	描述	示例值
`server`	指定音乐平台。	`netease`（网易云音乐）、`tencent`（腾讯音乐）、`kugou`（酷狗音乐）、`xiami`（虾米音乐）、`baidu`（百度音乐）
`type`	指定音乐类型。	`song`（单曲）、`album`（专辑）、`playlist`（歌单）、`artist`（歌手）、`search`（搜索结果）
`id`	音乐资源的唯一标识符，根据 `server` 和 `type` 不同而不同。	例如网易云音乐某个歌单的 ID：`60198`

播放器样式与布局参数

参数名	描述	示例值
`fixed`	是否开启固定模式，播放器固定在页面底部。	`true` 或 `false`
`mini`	是否开启迷你模式。	`true` 或 `false`
`list-folded`	列表是否折叠。	`true` 或 `false`
`list-max-height`	列表的最大高度。	如 `340px`

播放控制参数

参数名	描述	示例值
`autoplay`	是否自动播放。	`true` 或 `false`
`loop`	循环模式。	`all`（全部循环）、`one`（单曲循环）、`none`（不循环）
`order`	播放顺序。	`list`（列表顺序）、`random`（随机播放）
`preload`	预加载策略。	`auto`（自动）、`metadata`（仅元数据）、`none`（不预加载）
`volume`	初始音量，范围为 0 到 1。	如 `0.7`
`mutex`	是否互斥播放，即同一时间只允许一个播放器播放。	`true` 或 `false`

歌词相关参数

参数名	描述	示例值
`lrc-type`	歌词显示类型。	`0`（不显示歌词）、`1`（使用 `lrc` 属性提供的歌词）、`2`（从音乐源获取歌词）、`3`（优先从 `lrc` 属性获取，若没有则从音乐源获取）
`lrc`	自定义歌词内容，当 `lrc-type` 为 1 或 3 时有效。	如 `[00:00.00] 这是歌词`

示例代码

以下是一个使用多个参数的 <meting-js> 标签示例，展示了如何在 HTML 中配置一个网易云音乐歌单的播放器：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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><title>音乐播放器示例</title>
</head><body><meting-jsserver="netease"type="playlist"id="60198"fixed="true"autoplay="false"loop="all"order="list"preload="auto"volume="0.7"mutex="true"list-folded="false"list-max-height="340px"lrc-type="3"></meting-js>
</body></html>

在这个示例中，播放器将播放网易云音乐的指定歌单，采用固定模式，初始音量为 0.7，循环模式为全部循环等。你可以根据自己的需求调整这些参数。

3、api无法访问导致的错误（Naccl自己搭建的）

https://github.com/Naccl/NBlog/issues/97