• 欢迎光临~

给博客添加一个播放器

开发技术 开发技术 2022-07-17 次浏览

所需依赖

<!-- APlayer.js相关依赖,作用是播放器的相关功能与样式的封装 -->
<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>

APlayer.js官网

<!-- Meting.js相关依赖,是基于APlayer.js封装的播放器制作的一个可以调用到QQ音乐或网易云歌单的项目 -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

Meting.js项目地址

安装

在添加好依赖之后,直接引入下面的代码,就可以看到你的网页左下角多出了一个播放器

<meting-js
        server="netease"
        type="playlist"
        id="7542145956"
        autoplay="true"
        fixed="true"
        loop="all"
        order="random"
        preload="auto"
        list-folded="ture"
        list-max-height="500px">
</meting-js>

配置详解

*的表示是必须的

server*

指定调用的 API,可选 netease, tencent, kugou, xiami, baidu,分别对应网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐

type*

指定调用类型,可选 song, playlist, album, search, artist,分别对应单曲、歌单、专辑、搜索结果、艺术家

id*

指定调用的 id,一般可以在地址栏中找到,例如我引入的是网易云的歌单,打开网页版的网易云,登入后找到你需要绑定的歌单,例如https://music.163.com/#/my/m/music/playlist?id=7542145956中,后面的7542145956就是歌单的id

autoplay

字面意思,是否自动播放,如果开启自动播放,则从其他页面跳转进来时会自动播放音乐,刷新不会触发这个效果

fixed

是否固定,如果值为true,那么就会绑定到页面的左下角,就像我博客这样

loop

是否循环播放歌曲

order

播放模式,可选 list, random,分别对应顺序播放与随机播放

list-folded

是否默认折叠歌曲列表

list-max-length

歌曲列表的最大高度,超过后出现滚动条

lrc-type

歌词类型,这个没有深入研究,默认值是0,歌词会显示在页面中间,如果需要隐藏歌词,设置为1即可

程序员灯塔
转载请注明原文链接:给博客添加一个播放器
喜欢 (0)