Loading

VUE3中使用APlayer+Meting

实现步骤

一、先贴一个APlayer.js 和 Meting.js 链接

GitHub链接：

快速下载链接：

下载方法：

  • 以下操作全部使用“快速下载链接”完成。

  • 具体请看图：

1. 打开APlayer下载网站：

图片

2. 下载APlayer文件

红框和绿框中的分别代表一个文件，点击四个文件后面的复制链接按钮，到一个新的标签页的地址栏，按回车键。以APlayer.min.css为例：

图片

在屏幕上右键另存为，保存到本地。四个全部如此即可。

3. 打开Meting下载网站

图片

4. 下载Meting文件

复制绿框内的链接到新标签页的地址栏后打开；同样右键另存到本地即可

图片

5. 下载完成

  • 得到五个文件，如图：

图片

  • 这里我的IDE(编辑器)用的是WebStorm，所以图标可能会有所不同(不重要)

  • Tips：如果你不会这些操作，那你就去。。。

  • 下面贴上我的目录结构：

  • 我建了一个static目录：路径为："src/static/APlayer/你的文件"；

  • 当你把五个文件全部放进一个目录下时，.map文件就会到它的同名文件下(WebStorm是这样，别的不知道)。

图片

二、使用方法

1.新建一个APlayer.vue组件

  • 复制代码放进你的组件里，这里我用的是setup语法糖；

  • 此处的"737535139"是准备的歌单id，如何获取id见文末。

<template>
  <div>
    <h1>XXX的歌单</h1>
    <meting-js
        server="netease"
        type="playlist"
        id="737535139"
    ></meting-js>
  </div>
</template>

<script setup>
import "../../static/APlayer/APlayer.min.js";
import "../../static/APlayer/APlayer.min.css";
import "../../static/APlayer/Meting.min.js"

</script>

<style scoped>
/* 在这里添加你的样式 */
</style>
  • 效果如图：

图片

  • 图中引用路径是我的路径，你可以换成你项目的。

2. 引用APlayer组件

  • 找到你的需要放APlayer组件的地方，比如我放在Dashboard这个页面：

图片

  • 这里标签用APlayer是因为我们引入的组件是APlayer.vue

  • 附上简易代码：

<template>
  <div class="dashboard">
      <div class="music163">
        <APlayer></APlayer>
      </div>
  </div>
</template>

<script setup>
import APlayer from "../../components/APlayer/APlayer.vue";
<script>

<style scoped>
/* 在这里添加你的样式 */
</style>

3. 展示完成效果

  • 我这里用的是我的歌单id，可以正常显示并播放音乐。

  • 至于第一首歌为只有30秒，是因为这种方式并没有登录，只能试听(就是没有VIP-_-)。

图片

三、关于Meting设置

1. Meting的配置项

<!--MetingJS参数详情-->
<!--
id='外链播放器id',必须参数
type=[song=单曲, playlist=歌单, album=专辑, search=搜索结果, artist=艺术家],必须参数
server=[netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐, xiami=虾米音乐, baidu=百度音乐],必须参数
fixed=启用固定模式，固定在左下角,默认false
mini=启用迷你模式,默认false
preload=[none,metadata,auto]
mutex=[互斥锁，默认true],默认false
order=[random=随机播放,list=列表播放]
loop=[all=全部循环, one=循环一次 ,none=不循环]
volume=[音量，默认0.7]
lrc-type=[歌词类型，默认0]
list-folded=[列表是否折叠，默认false]
list-max-height=列表最大高度,默认340px
storage-name=本地存储存储密钥，用于存储播放器设置,默认metingjs
-->

四、如果你只是HTML使用APlayer

* HTML中使用APlayer + Meting

  • 废话不多说，直接上代码

  • 红框部分为官网文档提供的CDN链接

图片

  • 直接复制就能用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestMeting</title>
    <!-- require APlayer -->
    <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>
    <!--require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
</head>
<body>

<div>
    <h1>testMeting</h1>
    <meting-js
            server="netease"
            type="playlist"
            id="737535139"><!--此处更换为你的网易云歌单id-->
    </meting-js>
</div>

</body>
</html>
  • 展示效果：

图片

五、获取歌单ID

  • 这里以网易云音乐为例：

1. 打开网易云音乐官网

图片

2. 随便找一个歌单点进去

图片

3. 复制红框里的数字即可。

六、音乐进度保持

  • 这里以博客园为例

1. 打开博客园的博客设置页面

图片

2.上代码，放到你的页脚HTML位置

<!-- 设置APlayer + Meting,实现音乐播放 -->
<div style="color: black; ">
    <meting-js
            server="netease"
            type="playlist"
            id="737535139"
            fixed="true"
            volume="0.1"
            mini="true"
            order="random"
            list-max-height="500px"
            
            >
    </meting-js>
</div>
<!-- require APlayer -->
<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>
<!--require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<script>
    ap = null
    Object.defineProperty(document.querySelector('meting-js'),"aplayer",{
        set: function(aplayer) {
            ap=aplayer
            ready();
        }
    });
    
    isRecover = false;
    function ready(){
        ap.on('canplay', function () {
            if(!isRecover){
                if(localStorage.getItem("musicIndex") != null){
                    musicIndex = localStorage.getItem("musicIndex");
                    musicTime = localStorage.getItem("musicTime");
                    if(ap.list.index != musicIndex){
                        ap.list.switch(musicIndex);
                    }else{
                        ap.seek(musicTime);
                        ap.play();
                        localStorage.clear();
                        isRecover = true;
                    }
                }else{
                    isRecover = true;
                }
            }
        });
    }

    window.onbeforeunload = function(event) {
        if(!ap.audio.paused){
            musicIndex = ap.list.index;
            musicTime = ap.audio.currentTime;
            localStorage.setItem("musicIndex",musicIndex);
            localStorage.setItem("musicTime",musicTime);
        }
    };
</script>

3. 最终效果

  • 就是：你当前页面刷新或者跳转另一个页面后，当前播放的歌曲进度不会丢失，会继续播放！✌️
posted @ 2025-04-17 16:15  CSH215  阅读(305)  评论(0)    收藏  举报