给自己的网页添加音乐播放器
侧边栏壁纸
  • 累计撰写 61 篇文章
  • 累计收到 19 条评论
  • 今日撰写 0 篇文章

给自己的网页添加音乐播放器

尼采
2021-09-21 / 1 评论 / 69 阅读 / 正在检测是否收录...

在这里我们使用的是Metingjs,基于Aplayer插件封装好的插件,可以直接使用

第一步:
在<head>标签下面引入两个script和一个css样式

<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>

第二步:在<body>中定义播放器的属性,可以参考下表更改参数

<meting-js
        server="netease"    <%--平台--%>
        type="playlist"        <%--类型--%>
        id="2811637909"         <%--播放列表ID--%>
        fixed="true"        <%--固定模式--%>
        autoplay="true"   <%--自动播放--%>
        loop="all"          <%--循环--%>
        order="list"      <%--顺序--%>
        preload="auto"      <%--加载--%>
        list-folded="ture"      <%--列表折叠--%>
        list-max-height="1000px"    <%--最大高度--%>
        lrc-type="1">       <%--歌词--%>
</meting-js>

参数可以参考下图设置:
Test

效果如下:
Test

代码展示:
Test

本文共 115 个字数,平均阅读时长 ≈ 1分钟
3

打赏

海报

正在生成.....

评论 (1)

取消
  1. 头像
    入门小白 Lv.1
    杭州 ·iPhone · QQ Browser
    沙发

    学到了

    回复 删除 垃圾