首页教程软件教程正文

如何在Vue项目中引入meting-js音乐播放器插件详解

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 245 浏览 4278 个字

摘要 :

文章目录一、开源项目中音乐播放插件的使用流程（一）下载meting–js相关文件（二）在index.html中引入文件（三）在index.vue组件中使用二、meting-js插件……

文
章
目
录

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

（一）下载meting–js相关文件
（二）在index.html中引入文件
（三）在index.vue组件中使用

二、meting-js插件的使用

（一）音乐源相关参数
（二）播放器样式与布局参数
（三）播放控制参数
（四）歌词相关参数
（五）示例代码

今天咱们就来聊聊如何在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音乐播放器插件，并根据自己的需求进行定制了。希望这篇文章能帮助大家快速实现项目中的音乐播放功能。

赏

微信扫一扫

支付宝扫一扫

版权：转载请注明出处：https://www.zuozi.net/6928.html