章
目
录
今天咱们就来聊聊如何在Vue项目里引入meting-js音乐播放器插件，让你的项目轻松拥有音乐播放的能力。相关开源项目地址：https://github.com/swzaaaaaaa/NBlog 。
一、开源项目中音乐播放插件的使用流程
（一）下载meting-js相关文件
要使用meting-js插件，首先得获取它的相关文件。我们可以从MetingJS官方仓库，或者其他靠谱的CDN（内容分发网络）下载meting-js的JavaScript文件，以及它的依赖文件，像APlayer的文件。下载完成后，把这些文件放到项目的public文件夹下，再在public文件夹里新建一个js文件夹，将文件存放在里面。这样做是为了让项目结构更清晰，方便后续管理和调用。
（二）在index.html中引入文件
文件下载好后，就要在public/index.html文件里引入它们。在这个文件的<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>
这段代码里，<link>标签用于引入样式文件，<script>标签则用来引入JavaScript文件。通过这些引入操作，项目就能使用meting-js及其依赖的功能了。不过要注意，原作者搭建的api有时会出问题，这里先注释掉了，如果有需要，大家可以自己尝试搭建。
（三）在index.vue组件中使用
完成前面的步骤后，在需要展示音乐播放器的Vue组件，比如index.vue里，就可以直接在模板中使用<meting-js>标签了。就像下面这样：
<template>
<div class="site">
<div class="main">
<!-- 其他内容 -->
<div class="m-mobile-hide">
<meting-js :server="siteInfo.playlistServer" :id="siteinfo.playlistid" type="playlist" fixed="true" theme=""/>
</div>
<!-- 回到顶部 -->
<el-backtop style="box-shadow: none;background:none; z-index:9999;">
<img src="/img/paper-plane.png" style="width:40px;height:40px; ">
</el-backtop>
<!-- 底部footer -->
<Footer :siteInfo="siteinfo" :badges="badges" :newBloglist="newBloglist" :hitokoto="hitokoto"/>
</div>
</template>
这样，meting-js就成功引入到项目中了，并且可以在多个Vue组件里使用。但要留意，这种引入方式下，meting-js及其依赖文件会在页面加载时全部被加载，可能会影响页面的初始加载速度。要是项目对性能要求比较高，就需要考虑优化这些文件，比如压缩文件大小、采用按需加载的方式等。
二、meting-js插件的使用
使用<meting-js>标签时，通过设置不同的参数，可以定制音乐播放器的功能和外观。下面给大家详细介绍一些常用参数。
（一）音乐源相关参数
- server：这个参数用来指定音乐平台，比如
netease代表网易云音乐、tencent是腾讯音乐、kugou是酷狗音乐、xiami是虾米音乐、baidu是百度音乐。 - type：用于指定音乐类型，像
song表示单曲、album是专辑、playlist是歌单、artist是歌手、search是搜索结果。 - id：它是音乐资源的唯一标识符，不同的音乐平台和音乐类型，这个ID也不一样。比如网易云音乐某个歌单的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] 这是歌词。
（五）示例代码
下面是一个在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>
在这个示例里，播放器会播放网易云音乐的指定歌单，采用固定模式，初始音量设为0.7，循环模式是全部循环等。大家可以根据自己的喜好和项目需求，调整这些参数。
通过以上步骤，大家就能顺利在Vue项目中引入meting-js音乐播放器插件，并根据自己的需求进行定制了。希望这篇文章能帮助大家快速实现项目中的音乐播放功能。
