给任意网站添加一个强大的音乐播放器(APlayer+MetingJ)-砝码网

给任意网站添加一个强大的音乐播放器(APlayer+MetingJ)

APlayer播放器+MetingJ是一个强大的存在,可在我们的网站播放各大平台的音乐,音乐播放器也有多种模式,现在几乎所有网页使用音乐播放器的网站都在使用他,下面看看播放器样式,音乐播放器等源码项目下载,请继续阅读下面文章废话不多说直接进入主题,先看播放器方式,截图很丑,演示就强大了,可复制实例代码1到自己的网站看看效果,

音乐播放器(APlayer+MetingJ)

实例代码一:(固定展示在网页左下角)

1.复制下面代码至网站公共底部文件,一般为“footer”命名的文件,理论“</body>”标签前均可。

<!--音乐插件-->
<link rel="stylesheet" href="https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.css">
<script src="https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js server="netease" type="playlist" id="4902606135"  autoplay="false" fixed ="true" </meting-js>
<!--音乐插件-->

2.上述代码中,1、2、3行代码为调用远程js文件(CDN加速),我们一般不用修改,如果你需要下载到本地,同步一下即可。

3.最重要的是第四行代码,我们需要知道各个标签表示的是什么,下面我们就来简单解释一下

<meting-js server="netease" type="playlist" id="4902606135" autoplay="false" fixed ="true" </meting-js>

  • server=”netease”   表示:平台名称=> (netease:网易;tencent:腾讯;xiami:虾米 kugou:酷狗;baidu:百度)
  • type=”playlist”  表示:类型=> (playlist:歌单;song:单曲;专辑:album;关键词:search;歌手:artist)
  • id=”4902606135″ 表示:网易云音乐的歌单id为“4902606135”
  • autoplay=”false”  表示:自动播放(自动播放:true;不自动播放:false)
  • fixed =”true” 表示:固定模式 (是:true;不是:false)

实例代码二:(页面插入暂时)

1.在头部文件header上添加如下代码,一般为<head>标签与</head>标签直接直接:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>

2.在底部文件</body>标签之前上添加下述代码,一般为“footer”命名的文件

<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>

3.在使用的地方上添加如下代码;

<div class="aplayer" data-id="60198" data-server="netease" data-type="playlist"></div>

或者,喜欢哪一个添加哪一个

<div class="aplayer" data-id="002QE24W26baEy" data-server="tencent" data-type="album" data-fixed="true" data-autoplay="false" data-volume="1.0" data-list-max-height="200px" data-list-folded="true"></div>

4.上述第3步在使用时,我们可以用自己模板的css样式包裹起来,这样才更好看

注:上述1、2步还是一样不用管,还是修改第三步,标签就不再重述了,参考实例一和下面的标签,写得很详细了!

标签说明:

option default description
id require song id / playlist id / album id / search keyword
server require music platform: netease, tencent, kugou, xiami, baidu
type require song, playlist, album, search, artist
auto options music link, support: netease, tencent, xiami
fixed false enable fixed mode
mini false enable mini mode
autoplay false audio autoplay
theme #2980b9 main color
loop all player loop play, values: ‘all’, ‘one’, ‘none’
order list player play order, values: ‘list’, ‘random’
preload auto values: ‘none’, ‘metadata’, ‘auto’
volume 0.7 default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutex true prevent to play multiple player at the same time, pause other players when this player start play
lrc-type 0 lyric type
list-folded false indicate whether list should folded at first
list-max-height 340px list max height
storage-name metingjs localStorage key that store player setting

翻译中文参考:

选项 默认 描述
id(编号) require 歌曲ID /播放列表ID /专辑ID /搜索关键字
server(平台) require 音乐平台:neteasetencentkugouxiamibaidu
type(类型) require songplaylistalbumsearchartist
auto(支持类种 类) options 音乐链接,支持:neteasetencentxiami
fixed(固定模式) false 启用固定模式,默认false
mini(迷你模式) false 启用迷你模式,默认false
autoplay(自动播放) false 音频自动播放,默认false
theme(主题颜色) #2980b9 默认#2980b9
loop(循环) all 播放器循环播放,值:“all”,one”,“none”
order(顺序) list 播放器播放顺序,值:“list”,“random”
preload(加载) auto 值:“none”,“metadata”,“’auto”
volume(声量) 0.7 默认音量,请注意播放器会记住用户设置,用户自己设置音量后默认音量将不起作用
mutex(限制) true 防止同时播放多个玩家,在该玩家开始播放时暂停其他玩家
lrc-type(歌词) 0 歌词显示
list-folded(列表折叠) false 指示列表是否应该首先折叠
list-max-height(最大高度) 340px 列出最大高度
storage-name(储存名称) metingjs 存储播放器设置的localStorage键
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享