类别:其他

日期:2021-12-18 浏览:1843 评论:0

1. Aplayer和MetingJ的介绍

Aplayer官网文档:https://aplayer.js.org/#/

Metingjs官网文档:https://github.com/metowolf/MetingJS

Aplayer是一个功能强大的HTML5音乐播放器,Metingjs基于Aplayer插件封装好的插件,开箱即用。

2. MetingJS的简单使用

MetingJS支持Aplayer版本

VersionAPI StatusAPlayer
1.2.xSupported1.10.0
2.0.xLatest1.10.0

支持的浏览器

  • Chrome

  • Firefox

  • Safari

  • Internet Explorer 11

  • Microsoft Edge

简单使用

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title></title>    
    <!-- require APlayer -->
    <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>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    </head>
    <body>

    <meting-js server="netease" type="playlist" id="60198"></meting-js>
        
    </body></html>
解析:server="netease" type="playlist" id="60198"

server指音乐平台,netease指网易云音乐, type类型,playlist列表,id指歌曲的i或者专辑或列表外链id
因此重点在于指定平台,指定外链id

效果:

 

中文版选项

选项默认描述
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键

英文版选项

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

3. 迷你版背景音乐

根据以上参数,写好了迷你版背景音乐,默认在左下角显示,默认列表折叠,默认不显示歌词

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title></title>    
    <!-- require APlayer -->
    <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>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    </head>
    <body><meting-js 
    server="netease" 
    type="playlist" 
    id="60198"
    fixed="true" 
    autoplay="true"
    loop="all"
    order="random"
    preload="auto"
    list-folded="ture"
    list-max-height="500px"
    lrc-type="1"></meting-js>

    </body></html>

复制代码

<!--css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<!--js-->
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
        <!--使用-->
    <meting-js 
    server="netease" 
    type="playlist" 
    id="60198"
    fixed="true" 
    autoplay="true"
    loop="all"
    order="random"
    preload="auto"
    list-folded="ture"
    list-max-height="500px"
    lrc-type="1">
    </meting-js>

4. 网易云音乐外链获取方法

1、打开网页版网易云音乐:https://music.163.com/#

2、选择想要添加到音乐列表去的音乐,由于部分歌曲限制外链,只能另辟蹊径

3、打开网页控制台

4、选中外链元素

5、复制该行代码

<a data-action="outchain" data-rt="" data-href="/outchain/2/1400256289/" class="des s-fc7">生成外链播放器</a>

6、取data-href的链接,前面加上https://music.163.com/#进行拼接

https://music.163.com/#/outchain/2/1400256289/

7、访问:https://music.163.com/#/outchain/2/1400256289/,获取id成功

5. 网易云音乐个人歌单id获取

登陆个人网易云音乐,打开歌单,查看浏览器地址,id后面就是歌单

6. 博客园引用背景音乐

页脚区

<link rel="stylesheet" href=" 
<script src=" 
</script><script src=" 
</script>
<div>
<meting-js 
    server="netease" 
    type="playlist" 
    id="60198"
    fixed="true" 
    autoplay="true"
    loop="all"
    order="random"
    preload="auto"
    list-folded="ture"
    list-max-height="500px"
    lrc-type="1">
</meting-js>    
</div>


本文标题:Aplayer如何搭配Metingjs音乐插件的使用
本文链接:https://vtzw.com/post/770.html
作者授权:除特别说明外,本文由 零一 原创编译并授权 零一的世界 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
 您阅读本篇文章共花了: 

 可能感兴趣的文章

评论区

发表评论 / 取消回复

必填

选填

选填

◎欢迎讨论,请在这里发表您的看法及观点。