metowolf / metingjs Goto Github PK

View Code? Open in Web Editor NEW

1.1K 7.0 151.0 23 KB

:cake: A powerful plugin connect APlayer and Meting

Home Page: https://i-meto.com/about/

License: MIT License

JavaScript 100.00%

music aplayer api

metingjs's Introduction

Requirement

https://github.com/MoePlayer/APlayer

Version	API Status	APlayer
1.2.x	Supported
2.0.x	Latest

CDN

Quick Start

<!-- 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/dist/Meting.min.js"></script>

<meting-js
	server="netease"
	type="playlist"
	id="60198">
</meting-js>

https://music.163.com/#/playlist?id=60198

<meting-js
	auto="https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html">
</meting-js>

https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html

<meting-js
	name="rainymood"
	artist="rainymood"
	url="https://rainymood.com/audio1110/0.m4a"
	cover="https://rainymood.com/i/badge.jpg">
</meting-js>

for self-hosted media

<meting-js
	name="rainymood"
	artist="rainymood"
	url="https://rainymood.com/audio1110/0.m4a"
	cover="https://rainymood.com/i/badge.jpg"
	fixed="true">
	<pre hidden>
		[00:00.00]This
		[00:04.01]is
		[00:08.02]lyric
	</pre>
</meting-js>

Fixed mode with Lyric text

Option

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

Documentation for APlayer can be found at https://aplayer.js.org/#/home?id=options

Advanced

MetingJS allow you to use self-hosted API, more information about Meting.

<script>
var meting_api='http://example.com/api.php?server=:server&type=:type&id=:id&auth=:auth&r=:r';
</script>

<script src="dist/Meting.min.js"></script>

Browser support

Browsers without native custom element support require a polyfill.

Chrome
Firefox
Safari
Internet Explorer 11
Microsoft Edge

Author

MetingJS © metowolf, Released under the MIT License.

Blog @meto · GitHub @metowolf · Twitter @metowolf · Telegram Channel @metooooo

metingjs's People

Contributors

Stargazers

Watchers

Forkers

mathisdifficult peterlimao nlcoin haiwx oldthreefeng kimmy-wang zodiacwind cnsuhao moocstudent cokeenet roinlym lmh30600690 qfmx linzx91 ddhsa zhseasm rocgit alucardwind aaron-xue kinchuam mingyue5826 hayato-kazami quietclickcode sillybobo shebaoting yelonhimx acclaim11 lemon2911 mybbsky2012 wigehuang jerseyx zz412000428 curtaintears fakegit sherlockouo yuhaozhai cn-robert-liu shenshilei1022 iamlvtu imlzc summer1000fox luoxiangfan angeyflame azhan1998 wangpanqiao woe-knite github-favorites wangenci krisyun jacksunhack meng80000 mengbuxiu yagamihikari whitestorys lv1314520 sc419 charlesshine asdlei99 leader755 pixcati deanls1 team1368 algate collectionsbox hajeekn h1069610309 smallsixfight feiyu0 mhh215 leadline mrbluewhale chuchaochao vanisper mashirozx cnxingyu qiaohaoforever shyn0121 pzloveyou winkxx cosmosz-code alex-yimiu prince-king feiyuthomas appotry hj15518823336 eleven-ding sunsetmkt hxm456 luckzack bluesyoung-web ingridmi imashen cookiesnob wdhqwe520 oeyoews 7kwl moecinnamo bitruss liujaing huangwb8

metingjs's Issues

[Kugou music] Error return 500 resolving address when type is song

Other types are normal

Please take a look

無法正常顯示圖片

專輯圖片顯示不出來
需要把"pic"的url在瀏覽器上做一次GET request才能顯示
https://codepen.io/anon/pen/gooRxG?editors=1000

Bug! 非常严重! 在不同环境中加载无效！

在hexo+uikit+jquery在127.0.0.1运行时失败，通过连接监视显示并没有对api的请求
在同环境保存html文件到本地后可以执行，有对api的请求。

如何在使用 Meting 后使用 APlayer 的 API

使用 APlayer 提供的范例引用的话会无法加载。

SSL网站,如果歌曲是http的url,在微信和UC浏览器上不能播放,PC端能显示

测试网站:https://5fu8.com
在浏览器上能正常播放，到手机端，因为mp3的地址是http类型的地址，校验不安全，不能正常播放

不支持QQ音乐啊

<meting-js
	auto="https://y.qq.com/n/yqq/song/003OUlho2HcRHC.html">
</meting-js>

GET https://meting.api.i-meto.com/retry/?server=tencent&id=003OUlho2HcRHC net::ERR_CONNECTION_CLOSED

在Palemoon （Firefox 52.9 ESR）下无法正常加载

如图，但纯 APlayer 是正常的

无法匹配网易云音乐的官方动态歌单

网易云音乐的官方动态歌单是根据每个用户口味生成的，URL中不同的userid值会返回不同的歌单。

如：https://music.163.com/m/playlist?id=3136952023&userid=256811339

但是这个工具不支持读取userid的参数。导致无法获取针对每个人都不同口味的歌单。望解决，谢谢！

按钮自动隐藏了

为什么order按钮和loop按钮默认隐藏起来了？
https://cwscn.github.io/

metingjs与hexo-toc插件冲突，中文标题无法跳转

感谢作者开源metingjs的功能。
问题描述：
我在博客代码里加入metingjs的引用音乐的功能，然后在toc中的目录跳转时，如果遇到中文目录则无法跳转，英文目录正常跳转。如果将metingjs插件功能注销掉，则toc中文目录正常跳转，猜测是和hexo-toc插件的代码冲突。
具体博客代码参考：https://github.com/huweihuang/www.huweihuang.com/blob/master/themes/huweihuang/layout/post.ejs#L38

问题现象参考：https://www.huweihuang.com/article/kubernetes/kubernetes-resource/

文章中英文toc目录可以正常跳转，中文则当页跳转失败，但是复制地址到新业面则会跳转。

歌单无法自动或手动更新

我在网易云音乐创建了一个歌单，在第一次引用的时候，可以加载歌单信息。
但是该歌单添加新的歌曲的时候，插件引用的歌单并不会更新对应的歌单，好像也无法手动更新，一直在第一次加载的歌单上。
歌单的ID号并没有改变，能否设置成自动更新歌单的方式。

在hexo-tag-aplayer下的issue

能否增加一个接口回调事件

能否增加一个接口回调事件，获取到歌曲或者列表后可以自定义做些其他事情。

解析不出来了

调用代码

<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/dist/Meting.min.js"></script>
<meting-js style="width: auto;height: 2000px;"
    server="netease"
    type="playlist"
    id="2364053447"
    theme="#2980b9"
    loop="all"
    autoplay="false"
    order="list"
    storageName="aplayer-setting"
    lrctype= 0
    list-max-height="800px"
    >
</meting-js>

控制台打印

serverless-meto.herokuapp.com/meting/index.php?server=netease&type=playlist&id=2364053447&r=0.7724818304792973:1 GET https://serverless-meto.herokuapp.com/meting/index.php?server=netease&type=playlist&id=2364053447&r=0.7724818304792973 net::ERR_NAME_NOT_RESOLVED
(index):1 Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)
_parse @ Meting.min.js:1
connectedCallback @ Meting.min.js:1

线上网址https://removeif.github.io/music1/

api 解析服务器宕机？

https://api.i-meto.com/meting/api，请求到这个地址的所有请求全部超时。

写了一个函数计算版的后端服务

写了一个函数计算版的后端服务，现在分享出来

仓库

可以直接使用阿里云函数计算功能搭建后端，感觉服务端不稳定的可以尝试搭建一个

前进后退导致 Aplayer 重复创建

点击浏览器的返回，再点击前进回到页面，原来的 Aplayer 还在，meting-js 又会创建新的 Aplayer。猜测浏览器保存了原来的状态，同时也会触发 connectedCallback，感觉需要加个判断，或者作者有更好的办法。

  connectedCallback() {
    if (!this.aplayer && window.APlayer && window.fetch) {
      this._init()
      this._parse()
    }
  }

您好，qq音乐好像被腾讯墙了

谷歌浏览器控制台出现如下请求错误：

GET https://ws.stream.qqmusic.qq.com/M800004gQb5F3tsz7n.mp3?guid=410002021&vkey=DE797989D560CA3C699A1C0A557676DC26C903D87185F078C471FE7E99A63BEDBADAF42F1F74F7410CA6E41827343D2CCD1888BF19268547&uin=0&fromtag=66 net::ERR_CERT_COMMON_NAME_INVALID

播放器提示：An audio error has occurred, player will skip forward in 2 seconds.
网易云歌单正常播放，就是qq音乐被forbidden

能否设置歌词默认不显示

吸底状态下显示歌词，很容易挡住一些内容，可不可以增加选项，设置歌词默认不显示

请问短期内会取消支持1.x版本嘛？

网站出了一些问题，现在看起来是只能支持1.x版本，上2.x版本F12就会报错“Meting.min.js:1 Uncaught TypeError: Cannot read property 'destroy' of undefined”，所以准备暂时先用1.x版本的，请问1.x版本会一直支持下去嘛？有没有取消支持1.x版本的计划…

页面切换报错。

Uncaught TypeError: Cannot read property 'classList' of undefined
at e.value (list.js:176)
at e.value (player.js:516)
at player.js:184

list.js:176
this.player.container.querySelectorAll('.aplayer-list li')[this.index].classList.add('aplayer-list-light');

See Link .
1.点击 Playlist 进入带歌单的页面。
2.切换到其他页面。
3.再点击 Playlist 进入含含 meting-js 标签的页面，即报错。

用的是 1.20 + loadMeting() 适应pjax.
曾试过切换至 2.01，依然报错。

QQ 音乐歌词解析问题

如图，上面是网易云，下面是 QQ 音乐。

本地页面请求返回302

你好，请教一下，我用文档示例代码本地测试了一下，我看http请求响应的是302。为什么呢代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/APlayer.min.css">
    <script src="./dist/APlayer.min.js"></script>
</head>
<body>   
    <div class="aplayer"
        data-id="1338728670"
        data-server="netease"
        data-type="song">
    </div>        
</body>
<script src="dist/Meting.min.js"></script>
</html>

主题附带了aplayer，做单独的歌单也必需metingJS吗？

嗨，我用的hexo，主题是volantis，主题自带的有aplayer，可以在yml里开启底部或者侧边aplayer播放器。我想在文章内引用做一个歌单页面，但是按照aplayer官方的文档，嵌入的代码会以代码块的方式展示出来，所以我今天安装了tags-aplayer插件，按照那个文档也不行，直到使用了这个文档。
如果这些操作不是必需的话，请问有什么办法可以直接在posts里嵌入播放器呢？地址：https://w4j1e.xyz
非常感谢！

能通过js jq改变播放单曲吗

类型选的是song ，想通过控制button按钮去改变id从而改变播放的歌曲，这个可以实现吗

autoplay 似乎失效，请问怎么解决啊？

解析出的代码：

<meting-js theme="#1BCDFC" fixed="false" list-folded="true" mutex="true" autoplay="" server="tencent" type="playlist" id="1759617925" volume="0.7">

可是我在模板里写的是 autoplay="true" ，加载时怎么会没出来呢？

网址链接：inkss.cn

QQ音乐分享的链接无法解析

手机复制的分享链接是：http://url.cn/5HRmBUg
目标链接是：https://y.qq.com/n/yqq/song/97773_num.html 这个链接 meting 无法使用 auto 解析
而这首歌的链接是：https://y.qq.com/n/yqq/song/0039MnYb0qxYhV.html 这个链接 meting 可以使用 auto 解析

无法显示封面图

封面部分显示的是主题色纯色
见 https://rain.moimo.me/

正则无法匹配部分网易云 URL

如：http://music.163.com/song/26561948/?userid=90672819

Failed to load resource: net::ERR_CONNECTION_RESET

api.i-meto.com/meting/api?xxx此处省略。。。
无法访问，是什么问题？

使用外链添加（self-hosted media），怎么将多首歌添加到播放列表

自述文件中给出的代码只能添加一首歌，能不能添加多首歌？

<meting-js
	name="rainymood"
	artist="rainymood"
	url="https://rainymood.com/audio1110/0.m4a"
	cover="https://rainymood.com/i/badge.jpg">
</meting-js>