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

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

news 来源：原创 2025/6/18 18:25:43

开源项目：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-js
    server="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>