您好!欢迎来到闪库网
帮助中心   |    联系我们   |    手机版   |   

闪库网

热门搜索: 淘宝客   
免费发布任务
免费发布商品

如何给网站添加音乐播放器(APlayer+MetingJ)

  • 时间:2021-04-06 00:20 编辑:闪库 来源: 阅读:219
  • 扫一扫,手机访问
摘要:APlayer播放器+MetingJ是一个强大的存在,可在我们的网站播放各大平台的音乐,音乐播放器也有多种模式,现在几乎所有网页使用音乐播放器的网站都在使用他,下面看看播放器样式,音乐播放器等源码项目下载,请继续阅读下面文章废话不多说直接进入主题,先看播放器方式,截图很丑,演示就强大了,可复制实例代码1到自己的网站看看效果。实例代码一:(固定展示在网页左下角)1.复制下面代码至网站公共底部文件,一般为“footer”命名的文件,理论“&

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

音乐播放器

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

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

<!--音乐插件--><link rel="stylesheet" href="//cdn.staticfile.org/aplayer/1.10.1/APlayer.min.css"><script src="//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步还是一样不用管,还是修改第三步,标签就不再重述了,参考实例一和下面的标签,写得很详细了!

标签说明:


OptionDefaultDescription
idrequiresong id / playlist id / album id / search keyword
serverrequiremusic platform: neteasetencentkugouxiamibaidu
typerequiresongplaylistalbumsearchartist
autooptionsmusic link, support: neteasetencentxiami
fixedfalseenable fixed mode
minifalseenable mini mode
autoplayfalseaudio autoplay
theme#2980b9main color
loopallplayer loop play, values: 'all', 'one', 'none'
orderlistplayer play order, values: 'list', 'random'
preloadautovalues: 'none', 'metadata', 'auto'
volume0.7default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutextrueprevent to play multiple player at the same time, pause other players when this player start play
lrc-type0lyric type
list-foldedfalseindicate whether list should folded at first
list-max-height340pxlist max height
storage-namemetingjslocalStorage key that store player setting


翻译中文参考:


选项默认描述
id(编号)require歌曲ID /播放列表ID /专辑ID /搜索关键字
server(平台)require音乐平台:neteasetencentkugouxiamibaidu
type(类型)requiresongplaylistalbumsearchartist
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键


  • 全部评论(0)
联系我们
Q Q:2821865969
邮箱:luojing@skzo.cn
邮箱:2821865969@qq.com
时间:8:00 - 24:00
联系客服
网站客服 联系客服
手机版

扫一扫进手机版
返回顶部