搜索到
1
篇与
网页播放器
的结果
-
Aplayer搭配Metingjs音乐插件的使用 1. Aplayer和MetingJ的介绍Aplayer官网文档：https://aplayer.js.org/#/Metingjs官网文档：https://github.com/metowolf/MetingJSAplayer是一个功能强大的HTML5音乐播放器，Metingjs基于Aplayer插件封装好的插件，开箱即用。2. MetingJS的简单使用MetingJS支持Aplayer版本VersionAPI StatusAPlayer1.2.xSupported1.10.02.0.xLatest1.10.0支持的浏览器ChromeFirefoxSafariInternet Explorer 11Microsoft 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 音乐平台：netease，tencent，kugou，xiami，baidutype（类型） require song，playlist，album，search，artistauto（支持类种 类） options 音乐链接，支持：netease，tencent，xiamifixed（固定模式） false 启用固定模式，默认falsemini（迷你模式） false 启用迷你模式,默认falseautoplay（自动播放） false 音频自动播放，默认falsetheme(主题颜色) #2980b9 默认#2980b9loop（循环） 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键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/#进行拼接7、访问：https://music.163.com/#/outchain/2/1400256289/，获取id成功5. 网易云音乐个人歌单id获取登陆个人网易云音乐，打开歌单，查看浏览器地址，id后面就是歌单6. 博客园引用背景音乐<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> <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></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>
