Aplayer搭配MetingJS音樂插件的使用

1. Aplayer和MetingJ的介紹

Aplayer官網文檔：https://aplayer.js.org/#/

Metingjs官網文檔：https://github.com/metowolf/MetingJS

Aplayer是一個功能強大的HTML5音樂播放器，Metingjs基於Aplayer插件封裝好的插件，開箱即用。

2. 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鍵

英文版選項

option	default	description
id	require	song id / playlist id / album id / search keyword
server	require	music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type	require	`song`, `playlist`, `album`, `search`, `artist`
auto	options	music link, support: `netease`, `tencent`, `xiami`
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

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="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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 小型音樂播放器插件APlayer.js的簡單使用例子博客園的博客美化之-增加首頁音樂播放器APlayer zotero搭配插件zotfile和堅果雲安裝搭配VUE使用的UI框架ElementUI 策略模式和工廠模式搭配使用安裝搭配VUE使用的UI框架ElementUI react入門之使用webpack搭配環境（一） Java攔截器+注解搭配使用個人博客添加網易雲音樂Flash插件 Rust初步（三）：使用atom搭配racer進行rust編程