metowolf / MetingJS

:cake: A powerful plugin connect APlayer and Meting
https://i-meto.com/about/
MIT License
1.17k stars 158 forks source link
api aplayer music

Meting

Author Version Travis License

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="https://github.com/metowolf/MetingJS/raw/master/dist/Meting.min.js"></script>

Browser support

Browsers without native custom element support require a polyfill.

Author

MetingJS © metowolf, Released under the MIT License.

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