推荐一个好用的网站音乐播放器(APlayer+MetingJ)

作者 : admin 本文共3415个字,预计阅读时间需要9分钟 发布时间: 2021-02-26 共60人阅读

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步还是一样不用管,还是修改第三步,标签就不再重述了,参考实例一和下面的标签,写得很详细了!

标签说明:

 

Option Default Description
id require song id / playlist id / album id / search keyword
server require music platform: neteasetencentkugouxiamibaidu
type require songplaylistalbumsearchartist
auto options music link, support: neteasetencentxiami
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键
1. 本站所有源码、模板、插件、素材等其他资源,均来自网络收集及网友分享!
2. 本站资源重在学习交流研究,版权归原作者所有,如需商业请联系原开发作者购买!
3. 本站资源严谨商业或者非法用途,若出现法律纠纷与本站无关,一切后果请用户自负!
4. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制服务!
5. 本站资源会员只是赞助,根据个人需求选择,赞助费用仅维持本站的日常运营所需!
6. 本站提供资源大部分都会经过测试,但不保证100%无bug,如介意请勿下载!
7. 本站资源若有侵犯您的版权,请联尽快联系站长删除。
8. 如遇需要解压密码,则解压密码为"www.35ym.cn"!
9. 本站提供资源如遇下载链接失效,请联系站长处理!

35源码网 » 推荐一个好用的网站音乐播放器(APlayer+MetingJ)

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
网站下载资源无法正常使用或者运行怎么办?
本站所有资源均来源于网络收集和网友分享,大部分资源都会经过实际测试,但不保证所有资源百分百无bug存在,请知晓。如遇搭建失败,请首先排除技术问题,再咨询站长。
解压密码是什么?
如下载无特别说明时,本站资源使用统一解压密码:www.35ym.cn