Aplayer搭配Metingjs音乐插件的使用

Aplayer和MetingJ的介绍

Aplayer是一个功能强大的HTML5音乐播放器，Metingjs基于Aplayer插件封装好的插件，开箱即用。
Aplayer官网文档：https://aplayer.js.org/#/

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

MetingJS的简单使用

MetingJS支持Aplayer版本

Version	API Status	APlayer
1.2.x	Supported	1.10.0
2.0.x	Latest	1.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	音乐平台：netease，tencent，kugou，xiami，baidu
type（类型）	require	song，playlist，album，search，artist
auto（支持类种类）	options	音乐链接，支持：netease，tencent，xiami
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键

迷你版背景音乐

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

<!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>

平台

1、网页版网易云音乐：https://music.163.com/#
2、网页版QQ音乐：https://y.qq.com/
3、网页版虾米音乐：https://www.xiami.com/
4、网页版百度音乐音乐：http://play.baidu.com/

播放本地音频文件

<!doctype html>
<html class="no-js">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <title>musicPlay</title>
  <!-- require APlayer -->
  <link rel="stylesheet" href="./styles/APlayer.min.css">
  <script src="./scripts/APlayer.min.js"></script>
  <!-- require MetingJS -->
  <script src="./scripts/Meting.min.js"></script>
  <style>

  </style>
</head>

<body>

  <div id="player"></div>
  <script>
    var musicPlay = new APlayer({
      element: document.getElementById('player'),//样式1
      autoplay: false,
      showlrc: true,
      audio: [
        {
          name: 'name1',
          artist: 'artist1',
          url: './821F0EAEABF4B8C1FA932FC808BBD195.mp3',
          cover: 'cover1.jpg',
          lrc: 'lrc1.lrc',
          theme: '#ebd0c2'
        },
        {
          name: 'name2',
          artist: 'artist2',
          url: './8DE6540969939C942348F512926C201D.mp3',
          cover: 'cover2.jpg',
          lrc: 'lrc2.lrc',
          theme: '#46718b'
        }
      ]
    });
    musicPlay.init();

  </script>
</body>

</html>