Skip to content

Commit

Permalink
🌋 2.0.0, custom element support
Browse files Browse the repository at this point in the history
  • Loading branch information
metowolf committed Feb 16, 2019
1 parent 8c84089 commit 9e0e140
Show file tree
Hide file tree
Showing 9 changed files with 295 additions and 192 deletions.
22 changes: 16 additions & 6 deletions .babelrc
@@ -1,8 +1,18 @@
{
"presets": ["env"],
"env": {
"production": {
"presets": ["minify"]
}
}
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "14",
"firefox": "60",
"chrome": "49",
"safari": "10.3"
},
"useBuiltIns": "entry"
}
],
"minify"
],
"plugins": []
}
30 changes: 30 additions & 0 deletions .eslintrc.js
@@ -0,0 +1,30 @@
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2018
},
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
],
"no-console": "off",
}
};
4 changes: 1 addition & 3 deletions .gitignore
@@ -1,4 +1,2 @@
.idea
node_modules
package-lock.json
test
yarn.lock
2 changes: 1 addition & 1 deletion LICENSE
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2017 METO
Copyright (c) 2019 metowolf

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
113 changes: 67 additions & 46 deletions README.md
Expand Up @@ -15,73 +15,84 @@ https://github.com/MoePlayer/APlayer

|Version|API Status|APlayer|
|---|---|---|
|1.0.x|Deprecated|[![](https://img.shields.io/badge/APlayer-^1.6.0-red.svg?longCache=true&style=for-the-badge)](https://github.com/MoePlayer/APlayer/tree/1.6.0)|
|1.1.x|Compatibility|[![](https://img.shields.io/badge/APlayer-^1.7.0-green.svg?longCache=true&style=for-the-badge)](https://github.com/MoePlayer/APlayer/tree/1.7.0)|
|1.2.x|Latest|[![](https://img.shields.io/badge/APlayer-^1.10.0-green.svg?longCache=true&style=for-the-badge)](https://github.com/MoePlayer/APlayer)|
|1.2.x|Supported|[![](https://img.shields.io/badge/APlayer-^1.10.0-green.svg?longCache=true&style=for-the-badge)](https://github.com/MoePlayer/APlayer)|
|2.0.x|Latest|[![](https://img.shields.io/badge/APlayer-^1.10.0-green.svg?longCache=true&style=for-the-badge)](https://github.com/MoePlayer/APlayer)|

## CDN
- https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js
- https://unpkg.com/meting@1.2/dist/Meting.min.js
- https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js
- https://unpkg.com/meting@2/dist/Meting.min.js

## Quick Start
```html
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>

<div class="aplayer"
data-id="60198"
data-server="netease"
data-type="playlist">
</div>

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

```html
<div class="aplayer"
data-name="rainymood"
data-artist="rainymood"
data-url="https://rainymood.com/audio1110/0.m4a"
data-cover="https://rainymood.com/i/badge.jpg">
</div>
<meting-js
auto="https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html">
</meting-js>
```
https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html

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

```html
<div class="aplayer"
data-name="广东珠江经济电台"
data-artist="FM97.4"
data-url="http://lhttp.qingting.fm/live/1259/64k.mp3"
data-cover="http://pic.qingting.fm/2015/0209/20150209212831195.jpg!200"
data-fixed="true">
</div>
<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
Fixed mode with Lyric text


## Option

|option |default |description|
|:--------------------|:------------:|:----------|
|data-id |**require** |song id / playlist id / album id / search keyword|
|data-server |**require** |music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`|
|data-type |**require** |`song`, `playlist`, `album`, `search`, `artist`|
|data-fixed |`false` |enable fixed mode|
|data-mini |`false` |enable mini mode|
|data-autoplay |`false` |audio autoplay|
|data-theme |`#2980b9` |main color|
|data-loop |`all` |player loop play, values: 'all', 'one', 'none'|
|data-order |`list` |player play order, values: 'list', 'random'|
|data-preload |`auto` |values: 'none', 'metadata', 'auto'|
|data-volume |`0.7` |default volume, notice that player will remember user setting, default volume will not work after user set volume themselves|
|data-mutex |`true` |prevent to play multiple player at the same time, pause other players when this player start play|
|data-lrctype |`0` |lyric type|
|data-listfolded |`false` |indicate whether list should folded at first|
|data-listmaxheight |`340px` |list max height|
|data-storagename |`metingjs` |localStorage key that store player setting|
|~~data-mode~~ |**deprecated**|Instead `data-loop`, `data-order` should be used|
|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

Expand All @@ -97,6 +108,16 @@ var meting_api='http://example.com/api.php?server=:server&type=:type&id=:id&auth
<script src="dist/Meting.min.js"></script>
```

## Browser support

Browsers without [native custom element support](https://caniuse.com/#feat=custom-elementsv1) require a [polyfill](https://github.com/webcomponents/custom-elements).

- Chrome
- Firefox
- Safari
- Internet Explorer 11
- Microsoft Edge

## Author

**MetingJS** © [metowolf](https://github.com/metowolf), Released under the [MIT](./LICENSE) License.<br>
Expand Down
1 change: 0 additions & 1 deletion dist/Meting.min.js

This file was deleted.

70 changes: 39 additions & 31 deletions package.json
@@ -1,33 +1,41 @@
{
"name": "meting",
"version": "1.2.0",
"description": "Wow, such a beautiful html5 music player (with Meting API)",
"main": "dist/Meting.min.js",
"scripts": {
"dev": "npm run development",
"development": "babel src/Meting.js -o dist/Meting.min.js",
"prod": "npm run production",
"production": "BABEL_ENV=production babel src/Meting.js -o dist/Meting.min.js",
"test": "npm run production"
},
"repository": {
"url": "git+https://github.com/metowolf/MetingJS.git",
"type": "git"
},
"keywords": [
"player",
"music",
"api",
"meting",
"html5"
],
"author": "metowolf",
"license": "MIT",
"homepage": "https://github.com/metowolf/MetingJS",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-minify": "^0.4.3",
"babel-preset-env": "^1.7.0",
"babel-preset-minify": "^0.4.3"
}
"name": "meting",
"version": "2.0.0",
"description": "Wow, such a beautiful html5 music player (with Meting API)",
"license": "MIT",
"homepage": "https://github.com/metowolf/MetingJS",
"repository": {
"url": "git+https://github.com/metowolf/MetingJS.git",
"type": "git"
},
"author": {
"name": "metowolf",
"email": "i@i-meto.com",
"url": "https://i-meto.com/"
},
"main": "dist",
"scripts": {
"lint": "eslint source",
"build": "del dist && mkdir dist && babel source/Meting.js -o dist/Meting.min.js",
"test": "npm run build",
"prepublishOnly": "npm run build"
},
"files": [
"dist"
],
"keywords": [
"player",
"music",
"api",
"meting",
"html5"
],
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.3.3",
"@babel/preset-env": "^7.3.1",
"babel-preset-minify": "^0.5.0",
"del-cli": "^1.1.0",
"eslint": "^5.14.0"
}
}

0 comments on commit 9e0e140

Please sign in to comment.