commit
3027a7be4f
|
|
@ -0,0 +1 @@
|
|||
sample
|
||||
|
|
@ -0,0 +1,497 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>开始 - Kico Player</title>
|
||||
<meta name="theme-color" content="#3498db">
|
||||
<link rel="icon" href="static/icon-32.png" sizes="32x32"/>
|
||||
<link rel="icon" href="static/icon-192.png" sizes="192x192"/>
|
||||
<link href="static/kico.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="static/doc.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="static/KPlayer.css" rel="stylesheet" type="text/css"/>
|
||||
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="header">
|
||||
<img src="static/kico.svg" title="Kico Player"/>
|
||||
<span class="title">Player</span>
|
||||
</div>
|
||||
<nav class="menu">
|
||||
<a href="index.html" class="active" content="开始"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M893.7 505.9H129.3c-13 0-24.8-7.9-29.8-19.9-5-12-2.2-25.9 7-35.2l307-307c26.1-26.1 60.9-40.5 98-40.5s71.9 14.4 98 40.5l307 307c9.2 9.2 12 23.1 7 35.2-5 12.1-16.7 19.9-29.8 19.9zM673.2 919.9h-31.5c-17.8 0-32.3-14.4-32.3-32.3v-77.4c0-23.1-18.8-42.1-41.9-42.4-22.3 0.3-41.1 19.3-41.1 42.4v77.4c0 17.8-14.4 32.3-32.3 32.3H349.8c-70.9 0-128.7-63.7-128.7-141.9V581.9c0-17.8 14.4-32.3 32.3-32.3h516.2c17.8 0 32.3 14.4 32.3 32.3V778c-0.1 78.3-57.8 141.9-128.7 141.9z"></path></svg></a>
|
||||
<a href="settings.html" content="参数"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 510.4m-105.9 0a105.9 105.9 0 1 0 211.8 0 105.9 105.9 0 1 0-211.8 0ZM876 553.6l-8.2-4.8c-20-11.6-22.2-30.7-22.2-38.4 0-7.7 2.2-26.9 22.2-38.4l8.2-4.7c25.3-14.6 43.4-38.1 50.9-66.3 7.6-28.2 3.7-57.6-10.9-82.9l-35.3-61.2c-14.6-25.3-38.1-43.4-66.3-50.9-28.2-7.5-57.6-3.7-82.9 10.9l-8.2 4.7c-20 11.6-37.7 3.9-44.4 0s-22.2-15.3-22.2-38.4v-9.5c0-60.2-49-109.3-109.3-109.3h-70.6c-60.2 0-109.3 49-109.3 109.3v9.5c0 19.6-11.3 30.8-18 35.7-11.6 8.4-30.5 13.6-48.8 2.9l-8.8-5.2c-2.6-1.5-4.8-2.8-7.6-4.1-0.1 0-0.2-0.1-0.2-0.1-51.6-24-112.1-4.9-140.6 44.5L108 318c-14.6 25.3-18.5 54.7-10.9 82.9 7.6 28.2 25.6 51.7 50.9 66.3l8.2 4.8c20 11.6 22.2 30.7 22.2 38.4 0 7.7-2.2 26.9-22.2 38.4l-8.2 4.7c-25.3 14.6-43.4 38.1-50.9 66.3-7.6 28.2-3.7 57.6 10.9 82.9l35.3 61.2c14.6 25.3 38.1 43.4 66.3 50.9 28.2 7.5 57.6 3.7 82.9-10.9l8.2-4.7c20-11.6 37.7-3.9 44.4 0 6.7 3.9 22.2 15.3 22.2 38.4v9.5c0 60.2 49 109.3 109.3 109.3h70.6c60.2 0 109.3-49 109.3-109.3v-9.5c0-23.1 15.5-34.6 22.2-38.4 6.7-3.9 24.3-11.6 44.4 0l8.2 4.8c25.3 14.6 54.7 18.5 82.9 10.9 28.2-7.6 51.7-25.6 66.3-50.9l35.3-61.2c14.6-25.3 18.5-54.7 10.9-82.9-7.4-28.1-25.5-51.7-50.7-66.3zM512 687.8c-97.8 0-177.3-79.5-177.3-177.3S414.2 333.1 512 333.1s177.3 79.5 177.3 177.3S609.8 687.8 512 687.8z"></path></svg></a>
|
||||
</nav>
|
||||
</aside>
|
||||
<main class="content">
|
||||
<div class="wrap min">
|
||||
<div class="ks-title">
|
||||
<h1>开始</h1>
|
||||
<h2>如何使用 Kico Player</h2>
|
||||
</div>
|
||||
<div class="ks-content">
|
||||
<section>
|
||||
<h1>介绍</h1>
|
||||
<p>Kico Player 是一款外观简洁、功能强大的前端音乐播放器，由 <a href="https://paul.ren">奇趣保罗</a> 开发，是 Kico 前端作品系列的一员。</p>
|
||||
<ul>
|
||||
<li>最新版本：0.9</li>
|
||||
<li>上次更新：2023.5.22</li>
|
||||
<li>上次修订：2023.2.8</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h1>体验一番</h1>
|
||||
<p>这是作者保罗喜欢听的一些歌曲~</p>
|
||||
<div class="player-demo" id="player-1"></div>
|
||||
<p class="mb-2">
|
||||
<button class="btn small blue customed" id="toggle">播放/暂停</button>
|
||||
<button class="btn small blue customed" id="delete">删除歌曲</button>
|
||||
<button class="btn small blue customed" id="add">添加歌曲</button>
|
||||
</p>
|
||||
<p>这些歌曲是缤奇成员自创的音乐~</p>
|
||||
<div class="player-demo" id="player-2"></div>
|
||||
<p>
|
||||
<button class="btn small blue customed" id="prev">上一首</button>
|
||||
<button class="btn small blue customed" id="next">下一首</button>
|
||||
</p>
|
||||
<p>浏览器信息：<script>document.write(navigator.userAgent)</script></p>
|
||||
</section>
|
||||
<section>
|
||||
<h1>下载使用</h1>
|
||||
<p><a class="btn blue customed customed" href="https://github.com/Dreamer-Paul/Kico-Player" target="_blank">在 GitHub 上获取</a></p>
|
||||
<p>1. 引用 CSS 样式</p>
|
||||
<pre class="language-html"><code><link href="KPlayer.css" rel="stylesheet" type="text/css" /></code></pre>
|
||||
<p>2. 引用 JS</p>
|
||||
<pre class="language-html"><code><script src="KPlayer.js"></script></code></pre>
|
||||
<p>3. 设置启动器</p>
|
||||
<pre class="language-javascript"><code>const player = new KPlayer({
|
||||
container: document.querySelector("#player-1"),
|
||||
playlist: [
|
||||
{
|
||||
title: "Born Free",
|
||||
artist: "The Rassle",
|
||||
album: "Introducing",
|
||||
cover: "sample/cover/1.jpg",
|
||||
link: "sample/music/1.mp3"
|
||||
}
|
||||
]
|
||||
})</code></pre>
|
||||
<p>启动器参数及 API，详见 <a href="settings.html">参数</a> 页面</p>
|
||||
</section>
|
||||
<section>
|
||||
<h1>另请参阅</h1>
|
||||
<p>还有前端框架 Kico Style、时钟小工具 Kico Tools 等有趣的前端作品，欢迎关注！</p>
|
||||
<div class="more-product">
|
||||
<h4>奇趣框架 (Kico Style)</h4>
|
||||
<p>一款清爽简洁的响应式 CSS 前端框架，同样由保罗开发。</p>
|
||||
<p>
|
||||
<a class="btn blue customed" href="https://github.com/Dreamer-Paul/Kico-Style" target="_blank">项目地址</a>
|
||||
<a class="btn blue customed" href="https://works.paugram.com/style" target="_blank">文档地址</a>
|
||||
<a class="btn blue customed" href="https://paugram.com/essay/kico-style-story.html" target="_blank">项目故事</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="more-product">
|
||||
<h4>奇趣小工具 (Kico Tools)</h4>
|
||||
<p>一个集合了时钟、秒表、倒计时和随机数的小工具，依旧是由保罗开发。它采用 SvelteJS 框架进行开发。</p>
|
||||
<p>
|
||||
<a class="btn blue customed" href="https://github.com/Dreamer-Paul/Kico-Tools">项目地址</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<a class="to-top" href="#"></a>
|
||||
<p>© 2023 By <a href="https://paugram.com" target="_blank">Dreamer-Paul</a>.</p>
|
||||
</footer>
|
||||
|
||||
<script src="static/kico.js"></script>
|
||||
<script src="static/KPlayer.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Single@2.1/static/prism.js"></script>
|
||||
<script>
|
||||
const player_1 = new KPlayer({
|
||||
container: document.getElementById("player-1"),
|
||||
playlist: [
|
||||
{
|
||||
title: "Born Free",
|
||||
artist: "The Rassle",
|
||||
album: "Introducing",
|
||||
cover: "sample/cover/1.jpg",
|
||||
link: "sample/music/1.mp3"
|
||||
},
|
||||
{
|
||||
title: "Summer Vibe",
|
||||
artist: "Walk off the Earth",
|
||||
album: "Summer Vibe",
|
||||
cover: "sample/cover/2.jpg",
|
||||
link: "sample/music/2.mp3",
|
||||
lyric: "[00:03.550]Eh-oh, eh-oh, eh-oh bop bop away-o\n" +
|
||||
"[00:08.950]Summer vibe, summer vibe\n" +
|
||||
"[00:17.150]I'm looking for a summer vibe\n" +
|
||||
"[00:19.380]Got me turning on the radio\n" +
|
||||
"[00:22.080]I gotta kick these blues\n" +
|
||||
"[00:24.050]Working all day\n" +
|
||||
"[00:25.600]Trying to make pay\n" +
|
||||
"[00:27.150]Wishing these clouds away\n" +
|
||||
"[00:30.070]I want to feel the sunshine\n" +
|
||||
"[00:32.200]Hit the sand\n" +
|
||||
"[00:32.640]Take a walk in the waves\n" +
|
||||
"[00:34.320]With nothing else to do\n" +
|
||||
"[00:36.760]But sipping on suds\n" +
|
||||
"[00:38.040]Working on a buzz\n" +
|
||||
"[00:39.540]Keeping my drink in the shade\n" +
|
||||
"[00:41.710]Taking my time\n" +
|
||||
"[00:45.380]With you by my side\n" +
|
||||
"[00:47.120]A Cadillac ride\n" +
|
||||
"[00:48.800]Jammin' with the boys\n" +
|
||||
"[00:50.190]Bonfire at night\n" +
|
||||
"[00:51.510]Summer vibe\n" +
|
||||
"[00:54.780]Looking for a summer vibe\n" +
|
||||
"[00:57.660]I paid my dues\n" +
|
||||
"[00:59.900]Got nothing to prove\n" +
|
||||
"[01:00.780]Laying on the dock\n" +
|
||||
"[01:02.140]Just talking to you\n" +
|
||||
"[01:03.880]Summer vibe\n" +
|
||||
"[01:06.770]Looking for a summer vibe\n" +
|
||||
"[01:12.330]I'm Jonesing for a good time\n" +
|
||||
"[01:14.330]Hitting beaches all down the coast\n" +
|
||||
"[01:17.340]I'll find a place to post\n" +
|
||||
"[01:19.800]Gonna somehow\n" +
|
||||
"[01:20.760]Find a luau\n" +
|
||||
"[01:22.800]Dance this old night away\n" +
|
||||
"[01:24.820]I'm drinking something blue from a coconut\n" +
|
||||
"[01:26.970]Music all up in the place\n" +
|
||||
"[01:29.510]Under the moonlight\n" +
|
||||
"[01:30.810]Taking my time\n" +
|
||||
"[01:34.360]With you by my side\n" +
|
||||
"[01:35.990]A Cadillac ride\n" +
|
||||
"[01:37.500]Jammin' with the boys\n" +
|
||||
"[01:39.600]Bonfire at night\n" +
|
||||
"[01:40.670]Summer vibe\n" +
|
||||
"[01:43.170]Looking for a summer vibe\n" +
|
||||
"[01:46.600]I paid my dues\n" +
|
||||
"[01:49.200]Got nothing to prove\n" +
|
||||
"[01:49.800]Laying on the dock\n" +
|
||||
"[01:51.040]Just talking to you\n" +
|
||||
"[01:52.680]Summer vibe\n" +
|
||||
"[01:55.740]Looking for a summer vibe\n" +
|
||||
"[01:58.930]And the sun goes down\n" +
|
||||
"[02:01.740]But it'll rise again tomorrow\n" +
|
||||
"[02:06.280]Oha€| Eh-oh, eh-oh, eh-oh bop bop away-o\n" +
|
||||
"[02:12.940]With you by my side\n" +
|
||||
"[02:14.900]A Cadillac ride\n" +
|
||||
"[02:15.690]Jammin' with the boys\n" +
|
||||
"[02:17.280]Bonfire at night\n" +
|
||||
"[02:18.760]Summer vibe\n" +
|
||||
"[02:21.380]Looking for a summer vibe\n" +
|
||||
"[02:24.820]I paid my dues\n" +
|
||||
"[02:26.240]Got nothing to prove\n" +
|
||||
"[02:27.590]Laying on the dock\n" +
|
||||
"[02:29.150]Just talking to you\n" +
|
||||
"[02:30.760]Summer vibe\n" +
|
||||
"[02:33.650]Looking for a summer vibe\n" +
|
||||
"[02:38.080]Eh-oh, eh-oh, eh-oh bop bop away-o\n" +
|
||||
"[02:43.180]Summer vibe, summer vibe\n" +
|
||||
"[02:50.210]Eh-oh, eh-oh, eh-oh bop bop away-o\n" +
|
||||
"[02:55.360]Summer vibe\n" +
|
||||
"[02:58.200]Looking for a summer vibe"
|
||||
},
|
||||
{
|
||||
title: "Talking In Your Sleep",
|
||||
artist: "The Romantics",
|
||||
album: "What I Like About You (And Other Romantic Hits)",
|
||||
cover: "sample/cover/3.jpg",
|
||||
link: "sample/music/3.mp3"
|
||||
},
|
||||
{
|
||||
title: "Paradise",
|
||||
artist: "Coldplay",
|
||||
album: "Paradise",
|
||||
cover: "sample/cover/4.jpg",
|
||||
link: "sample/music/4.mp3"
|
||||
},
|
||||
{
|
||||
title: "Don't Look Back in Anger",
|
||||
artist: "Oasis",
|
||||
album: "Don't Look Back in Anger",
|
||||
cover: "sample/cover/5.jpg",
|
||||
link: "sample/music/5.mp3"
|
||||
},
|
||||
{
|
||||
title: "Crimson & Clover",
|
||||
artist: "Tommy James",
|
||||
album: "并没有专辑的说",
|
||||
cover: "sample/cover/6.jpg",
|
||||
link: "sample/music/6.ogg",
|
||||
lyric: "[00:00.00]I, now I don't hardly know her\n" +
|
||||
"[00:11.00]But I think I can love her\n" +
|
||||
"[00:17.85]Crimson and Clover\n" +
|
||||
"[00:24.88]I, now when she comes walkin' over\n" +
|
||||
"[00:35.25]Now I've been waitin' to show her\n" +
|
||||
"[00:41.65]Crimson and Clover\n" +
|
||||
"[00:47.60]Over and over\n" +
|
||||
"[01:22.63]Yeah, If I'm not such a sweet thing\n" +
|
||||
"[01:32.44]I wanna do everything\n" +
|
||||
"[01:38.69]What a beautiful feelin'\n" +
|
||||
"[01:44.91]Crimson and Clover\n" +
|
||||
"[01:50.72]Over and over\n" +
|
||||
"[02:27.62]Crimson and Clover\n" +
|
||||
"[02:30.54]Over and over\n" +
|
||||
"[02:33.41]Crimson and Clover\n" +
|
||||
"[02:36.32]Over and over\n" +
|
||||
"[02:39.14]Crimson and Clover\n" +
|
||||
"[02:42.02]Over and over\n" +
|
||||
"[02:44.82]Crimson and Clover\n" +
|
||||
"[02:47.52]Over and over\n" +
|
||||
"[02:50.40]Crimson and Clover\n" +
|
||||
"[02:53.08]Over and over\n" +
|
||||
"[02:55.89]Crimson and Clover\n" +
|
||||
"[02:58.63]Over and over",
|
||||
sub_lyric: "[00:00.00]我，现在我几乎不认识她了。\n" +
|
||||
"[00:11.00]但我想我可以爱她\n" +
|
||||
"[00:17.85]深红色和三叶草\n" +
|
||||
"[00:24.88]我，现在当她来的时候\n" +
|
||||
"[00:35.25]我一直在等着给她看\n" +
|
||||
"[00:41.65]深红色和三叶草\n" +
|
||||
"[00:47.60]一遍又一遍\n" +
|
||||
"[01:22.63]是的，如果我不是那么可爱的话\n" +
|
||||
"[01:32.44]我想做所有的事\n" +
|
||||
"[01:38.69]多美的感觉\n" +
|
||||
"[01:44.91]深红色和三叶草\n" +
|
||||
"[01:50.72]一遍又一遍\n" +
|
||||
"[02:27.62]深红色和三叶草\n" +
|
||||
"[02:30.54]一遍又一遍\n" +
|
||||
"[02:33.41]深红色和三叶草\n" +
|
||||
"[02:36.32]一遍又一遍\n" +
|
||||
"[02:39.14]深红色和三叶草\n" +
|
||||
"[02:42.02]一遍又一遍\n" +
|
||||
"[02:44.82]深红色和三叶草\n" +
|
||||
"[02:47.52]一遍又一遍\n" +
|
||||
"[02:50.40]深红色和三叶草\n" +
|
||||
"[02:53.08]一遍又一遍\n" +
|
||||
"[02:55.89]深红色和三叶草\n" +
|
||||
"[02:58.63]一遍又一遍"
|
||||
},
|
||||
|
||||
{
|
||||
title: "The Plastic Age",
|
||||
artist: "The Buggles",
|
||||
album: "The Age Of Plastic",
|
||||
cover: "sample/cover/7.jpg",
|
||||
link: "sample/music/7.mp3",
|
||||
lyric: "[00:58.50]Every day my metal friend\n" +
|
||||
"[01:02.92]Shakes my bed at 6am (Hello!)\n" +
|
||||
"[01:06.43]Then the shiny serving clones\n" +
|
||||
"[01:09.79]Run in with my telephones\n" +
|
||||
"[01:11.60]\n" +
|
||||
"[01:20.09]Talking fast I make a deal\n" +
|
||||
"[01:23.54]Buy the fake and sell what's real\n" +
|
||||
"[01:26.81]Ah, what's this pain here in my chest?\n" +
|
||||
"[01:30.35]Maybe I should take a rest\n" +
|
||||
"[01:33.78]\n" +
|
||||
"[01:37.85]They send the heart police\n" +
|
||||
"[01:40.16]To put you under, cardiac arrest\n" +
|
||||
"[01:44.78]And as they drag you through the door\n" +
|
||||
"[01:48.10]They tell you that you've failed the test\n" +
|
||||
"[01:51.07]\n" +
|
||||
"[01:54.35]Living in the ...\n" +
|
||||
"[01:57.78]Living in the plastic age\n" +
|
||||
"[02:01.24]Looking only half my age\n" +
|
||||
"[02:04.59]Hello doctor lift my face\n" +
|
||||
"[02:07.95]I wish my skin could stand the pace\n" +
|
||||
"[02:09.92]\n" +
|
||||
"[02:14.97]In my bed I read my mind\n" +
|
||||
"[02:18.36]Remember how the mice were blind\n" +
|
||||
"[02:21.63]I watch them fighting in their cage\n" +
|
||||
"[02:25.22]Could this be the plastic age?\n" +
|
||||
"[02:28.48]\n" +
|
||||
"[02:36.20]They send the heart police\n" +
|
||||
"[02:38.43]To put you under cardiac arrest\n" +
|
||||
"[02:43.16]And as they drag you through the door\n" +
|
||||
"[02:46.19]They tell you that you've failed the test\n" +
|
||||
"[02:49.59]\n" +
|
||||
"[02:52.65]Living in the\n" +
|
||||
"[02:56.11]Plastic age\n" +
|
||||
"[02:59.53]Plastic age\n" +
|
||||
"[03:03.17]Plastic age\n" +
|
||||
"[03:04.53]\n" +
|
||||
"[03:30.95]They send the heart police\n" +
|
||||
"[03:33.33]To put you under cardiac arrest\n" +
|
||||
"[03:37.80]And as they drag you through the door\n" +
|
||||
"[03:41.03]They tell you that you've failed the test\n" +
|
||||
"[03:44.59]\n" +
|
||||
"[03:47.57]Living in the...\n" +
|
||||
"[03:50.99]\n" +
|
||||
"[04:04.77]Plastic age\n" +
|
||||
"[04:08.15]Plastic age\n" +
|
||||
"[04:11.57]Plastic age\n" +
|
||||
"[04:16.35]\n"
|
||||
},
|
||||
{
|
||||
title: "陪你到世界尽头",
|
||||
artist: "双笙; 纱朵; 千月兔; Hanser...",
|
||||
album: "陪你到世界尽头",
|
||||
cover: "./sample/cover/8.jpg",
|
||||
link: "./sample/music/8.mp3"
|
||||
},
|
||||
{
|
||||
title: "Here Come the Autumn",
|
||||
artist: "Ilan Eshkeri",
|
||||
album: "The Sims 4 (Music From the Video Game)",
|
||||
cover: "./sample/cover/9.jpg",
|
||||
link: "./sample/music/9.mp3"
|
||||
},
|
||||
{
|
||||
title: "Gotta Have You",
|
||||
artist: "The Weepies",
|
||||
album: "Say I Am You",
|
||||
cover: "sample/cover/10.jpg",
|
||||
link: "sample/music/10.mp3"
|
||||
}],
|
||||
show_list: true,
|
||||
//debug: true,
|
||||
//autoplay: true,
|
||||
title_change: true
|
||||
});
|
||||
|
||||
function add_music(id) {
|
||||
if(id === null) return;
|
||||
|
||||
var data = !isNaN(parseInt(id)) ? {id: id} : {title: id};
|
||||
|
||||
ks.ajax({
|
||||
method: "GET",
|
||||
data: data,
|
||||
url: "https://api.paugram.com/netease/",
|
||||
success: function (req){
|
||||
var a = JSON.parse(req.response);
|
||||
player_1.add([a]);
|
||||
},
|
||||
failed: function (req){
|
||||
ks.notice("获取音乐信息错误了！", {color: "red"});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
add_music(28402565);
|
||||
add_music(557601772);
|
||||
add_music(28911957);
|
||||
add_music(26908478);
|
||||
add_music(4359358);
|
||||
add_music(566782264);
|
||||
add_music(27107308);
|
||||
|
||||
// 方法演示
|
||||
document.getElementById('toggle').addEventListener("click", player_1.toggle);
|
||||
document.getElementById('delete').addEventListener("click", player_1.remove);
|
||||
document.getElementById("add").addEventListener("click", () => {
|
||||
var _id = window.prompt("请输入网易云音乐 ID");
|
||||
|
||||
_id = _id.match(/\?id=[0-9]*|ong\/[0-9]*/);
|
||||
|
||||
if(_id && _id[0]) _id = _id[0].substr(4);
|
||||
|
||||
if(_id) add_music(Number(_id));
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
const playerBinkic = new KPlayer({
|
||||
container: document.getElementById("player-2"),
|
||||
playlist: [
|
||||
{
|
||||
title: "纷想时代",
|
||||
artist: "槕纸喵",
|
||||
album: "缤奇音乐组",
|
||||
cover: "sample/cover/binkic.jpg",
|
||||
link: "https://okgo.top/15074344971364613.mp3"
|
||||
},
|
||||
{
|
||||
title: "我们的心跳",
|
||||
artist: "922",
|
||||
album: "缤奇音乐组",
|
||||
cover: "sample/cover/binkic.jpg",
|
||||
link: "https://okgo.top/15074345107624155.mp3"
|
||||
},
|
||||
{
|
||||
title: "星间列车",
|
||||
artist: "望天",
|
||||
album: "缤奇音乐组",
|
||||
lyric: "[00:23.500]【心华】\n" +
|
||||
"[00:23.510]透过这小小的窗口，\n" +
|
||||
"[00:26.369]能看到浩瀚的宇宙。\n" +
|
||||
"[00:29.228]无数不知名的星球，\n" +
|
||||
"[00:32.043]对我眨眼眸。\n" +
|
||||
"[00:34.958]列车它会往哪里走？\n" +
|
||||
"[00:37.522]下一站要去哪儿遨游？\n" +
|
||||
"[00:40.437]还想要多一些停留，\n" +
|
||||
"[00:43.436]风景没看够。\n" +
|
||||
"[00:46.624]诞生 成长 消亡\n" +
|
||||
"[00:50.362]生命匆匆而过\n" +
|
||||
"[00:52.244]存在 探知 思考\n" +
|
||||
"[00:56.003]我将上下求索\n" +
|
||||
"[00:57.930]星间列车开往何方？\n" +
|
||||
"[01:00.133]轨道的尽头是否藏着希望？\n" +
|
||||
"[01:04.073]我也不多想，我只勇敢去闯。\n" +
|
||||
"[01:06.387]迎着未知而深邃的黑暗。\n" +
|
||||
"[01:09.170]星间列车开往何方？\n" +
|
||||
"[01:11.461]轨道的尽头是否充满梦想？\n" +
|
||||
"[01:15.337]我也不迷惘，我只背上行囊。\n" +
|
||||
"[01:17.692]装上字典，向星间流浪。\n" +
|
||||
"[01:21.766]\n" +
|
||||
"[01:32.767]【星尘】\n" +
|
||||
"[01:32.767]窗口它阻挡着自由，\n" +
|
||||
"[01:35.472]宇宙是更大的困囚。\n" +
|
||||
"[01:38.200]星辰的光芒不温柔，\n" +
|
||||
"[01:41.246]带着灼热诅咒。\n" +
|
||||
"[01:43.989]看她的笑容多无忧，\n" +
|
||||
"[01:46.793]像一只傻傻的猿猴，\n" +
|
||||
"[01:49.539]用夸张激动的感受，\n" +
|
||||
"[01:52.598]整天吵闹不休。\n" +
|
||||
"[01:55.782]行星 银河 宇宙\n" +
|
||||
"[01:59.816]正在崩坏消逝\n" +
|
||||
"[02:01.393]人类 生命 繁衍\n" +
|
||||
"[02:05.253]没有任何意义\n" +
|
||||
"[02:07.011]星间列车开往何方？\n" +
|
||||
"[02:09.331]轨道的尽头或许只剩绝望。\n" +
|
||||
"[02:13.140]孤独的重量，压力渐渐增强。\n" +
|
||||
"[02:15.572]笑容卷进黑洞被扯烂了。\n" +
|
||||
"[02:18.282]星间列车开往何方？\n" +
|
||||
"[02:20.546]轨道的尽头或许总是悲伤。\n" +
|
||||
"[02:24.437]我也不思量，我也无力反抗。\n" +
|
||||
"[02:26.826]任凭星尘，在时光中湮亡。\n" +
|
||||
"[02:31.096]\n" +
|
||||
"[02:53.686]【心华】\n" +
|
||||
"[02:53.686]星间列车开往何方？\n" +
|
||||
"[02:55.940]我想牵你的手去一起流浪。\n" +
|
||||
"[02:59.745]星际的迷航，何必执着方向。\n" +
|
||||
"[03:02.147]只要静静感受掌心的温暖。\n" +
|
||||
"[03:04.883]【星心相印】\n" +
|
||||
"[03:04.883]星间列车开向太阳，\n" +
|
||||
"[03:07.302]我相信希望总能驱散绝望。\n" +
|
||||
"[03:11.072]粒子光虚幻，为我织成翅膀。\n" +
|
||||
"[03:13.495]托举誓言，向着那未来飞翔。\n" +
|
||||
"[03:16.253]星间列车开往天堂，\n" +
|
||||
"[03:18.520]我相信梦想总会取代悲伤。\n" +
|
||||
"[03:22.279]宇宙的尽头，万物走到终端。\n" +
|
||||
"[03:24.683]不必害怕，我会在你的身旁。",
|
||||
cover: "sample/cover/binkic.jpg",
|
||||
link: "https://okgo.top/15074344798893089.mp3"
|
||||
},
|
||||
{
|
||||
title: "静梦午憩",
|
||||
artist: "922",
|
||||
album: "缤奇音乐组",
|
||||
cover: "sample/cover/binkic.jpg",
|
||||
link: "https://okgo.top/15077302620848648.mp3"
|
||||
}],
|
||||
title_change: true,
|
||||
show_list: true
|
||||
});
|
||||
|
||||
// 方法演示
|
||||
document.getElementById('prev').addEventListener("click", () => playerBinkic.prev());
|
||||
document.getElementById('next').addEventListener("click", () => playerBinkic.next());
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>参数 - Kico Player</title>
|
||||
<meta name="theme-color" content="#3498db">
|
||||
<link rel="icon" href="static/icon-32.png" sizes="32x32"/>
|
||||
<link rel="icon" href="static/icon-192.png" sizes="192x192"/>
|
||||
<link href="static/kico.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="static/doc.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="static/KPlayer.css" rel="stylesheet" type="text/css"/>
|
||||
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="header">
|
||||
<img src="static/kico.svg" title="Kico Player"/>
|
||||
<span class="title">Player</span>
|
||||
</div>
|
||||
<nav class="menu">
|
||||
<a href="index.html" class="active" content="开始"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M893.7 505.9H129.3c-13 0-24.8-7.9-29.8-19.9-5-12-2.2-25.9 7-35.2l307-307c26.1-26.1 60.9-40.5 98-40.5s71.9 14.4 98 40.5l307 307c9.2 9.2 12 23.1 7 35.2-5 12.1-16.7 19.9-29.8 19.9zM673.2 919.9h-31.5c-17.8 0-32.3-14.4-32.3-32.3v-77.4c0-23.1-18.8-42.1-41.9-42.4-22.3 0.3-41.1 19.3-41.1 42.4v77.4c0 17.8-14.4 32.3-32.3 32.3H349.8c-70.9 0-128.7-63.7-128.7-141.9V581.9c0-17.8 14.4-32.3 32.3-32.3h516.2c17.8 0 32.3 14.4 32.3 32.3V778c-0.1 78.3-57.8 141.9-128.7 141.9z"></path></svg></a>
|
||||
<a href="settings.html" content="参数"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 510.4m-105.9 0a105.9 105.9 0 1 0 211.8 0 105.9 105.9 0 1 0-211.8 0ZM876 553.6l-8.2-4.8c-20-11.6-22.2-30.7-22.2-38.4 0-7.7 2.2-26.9 22.2-38.4l8.2-4.7c25.3-14.6 43.4-38.1 50.9-66.3 7.6-28.2 3.7-57.6-10.9-82.9l-35.3-61.2c-14.6-25.3-38.1-43.4-66.3-50.9-28.2-7.5-57.6-3.7-82.9 10.9l-8.2 4.7c-20 11.6-37.7 3.9-44.4 0s-22.2-15.3-22.2-38.4v-9.5c0-60.2-49-109.3-109.3-109.3h-70.6c-60.2 0-109.3 49-109.3 109.3v9.5c0 19.6-11.3 30.8-18 35.7-11.6 8.4-30.5 13.6-48.8 2.9l-8.8-5.2c-2.6-1.5-4.8-2.8-7.6-4.1-0.1 0-0.2-0.1-0.2-0.1-51.6-24-112.1-4.9-140.6 44.5L108 318c-14.6 25.3-18.5 54.7-10.9 82.9 7.6 28.2 25.6 51.7 50.9 66.3l8.2 4.8c20 11.6 22.2 30.7 22.2 38.4 0 7.7-2.2 26.9-22.2 38.4l-8.2 4.7c-25.3 14.6-43.4 38.1-50.9 66.3-7.6 28.2-3.7 57.6 10.9 82.9l35.3 61.2c14.6 25.3 38.1 43.4 66.3 50.9 28.2 7.5 57.6 3.7 82.9-10.9l8.2-4.7c20-11.6 37.7-3.9 44.4 0 6.7 3.9 22.2 15.3 22.2 38.4v9.5c0 60.2 49 109.3 109.3 109.3h70.6c60.2 0 109.3-49 109.3-109.3v-9.5c0-23.1 15.5-34.6 22.2-38.4 6.7-3.9 24.3-11.6 44.4 0l8.2 4.8c25.3 14.6 54.7 18.5 82.9 10.9 28.2-7.6 51.7-25.6 66.3-50.9l35.3-61.2c14.6-25.3 18.5-54.7 10.9-82.9-7.4-28.1-25.5-51.7-50.7-66.3zM512 687.8c-97.8 0-177.3-79.5-177.3-177.3S414.2 333.1 512 333.1s177.3 79.5 177.3 177.3S609.8 687.8 512 687.8z"></path></svg></a>
|
||||
</nav>
|
||||
</aside>
|
||||
<main class="content">
|
||||
<div class="wrap min">
|
||||
<div class="ks-title">
|
||||
<h1>参数</h1>
|
||||
<h2>如何使用 Kico Player</h2>
|
||||
</div>
|
||||
<article class="ks-content">
|
||||
<section>
|
||||
<h1>参数类型</h1>
|
||||
<h2>播放器初始化参数</h2>
|
||||
<div class="ks-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数</th>
|
||||
<th>可选值</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>container</td>
|
||||
<td>DOM 元素</td>
|
||||
<td>元素选择器，可以是 <code>document.getElementById("player")</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>playlist</td>
|
||||
<td>数组</td>
|
||||
<td>播放列表，数据类型为一个 <a href="#歌曲对象参数">歌曲对象</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>autoplay</td>
|
||||
<td><code>true</code> <code>false</code></td>
|
||||
<td>是否自动播放音乐，默认为 <code>false</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show_list</td>
|
||||
<td><code>true</code> <code>false</code></td>
|
||||
<td>是否展开播放列表，默认为 <code>false</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title_change</td>
|
||||
<td><code>true</code> <code>false</code></td>
|
||||
<td>是否在播放音乐时修改页面标题，默认为 <code>false</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h2 id="歌曲对象参数">歌曲对象参数</h2>
|
||||
<div class="ks-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数</th>
|
||||
<th>可选值</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td></td>
|
||||
<td>音乐标题</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>artist</td>
|
||||
<td></td>
|
||||
<td>音乐作者</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>album</td>
|
||||
<td></td>
|
||||
<td>音乐专辑名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cover</td>
|
||||
<td></td>
|
||||
<td>音乐专辑封面</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>link</td>
|
||||
<td></td>
|
||||
<td>音乐链接地址</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>开放接口</h1>
|
||||
<div class="ks-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>方法</th>
|
||||
<th>参数</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>play</td>
|
||||
<td></td>
|
||||
<td>播放当前选择的音乐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pause</td>
|
||||
<td></td>
|
||||
<td>暂停当前选择的音乐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
<td></td>
|
||||
<td>切换播放/暂停</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>jump</td>
|
||||
<td><code>id</code></td>
|
||||
<td>播放列表的指定音乐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>prev</td>
|
||||
<td></td>
|
||||
<td>切换播放上一首音乐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>next</td>
|
||||
<td></td>
|
||||
<td>切换播放下一首音乐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mode</td>
|
||||
<td></td>
|
||||
<td>切换当前播放模式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>add</td>
|
||||
<td><code>包含歌曲构造 JSON 的一个数组</code></td>
|
||||
<td>向列表添加音乐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>remove</td>
|
||||
<td></td>
|
||||
<td>删除倒数第一首音乐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle_list</td>
|
||||
<td></td>
|
||||
<td>打开或关闭播放列表</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle_volume</td>
|
||||
<td></td>
|
||||
<td>切换音量</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h2>示例</h2>
|
||||
<p>引用一个播放器，添加两首音乐，默认展开列表，并开启标题切换</p>
|
||||
<pre class="language-javascript"><code>const player = new KPlayer({
|
||||
container: document.getElementById("player-1"),
|
||||
playlist: [
|
||||
{
|
||||
title: "Born Free",
|
||||
artist: "The Rassle",
|
||||
album: "Introducing",
|
||||
cover: "sample/cover/1.jpg",
|
||||
link: "sample/music/1.mp3"
|
||||
},
|
||||
{
|
||||
title: "Summer Vibe",
|
||||
artist: "Walk off the Earth",
|
||||
album: "Summer Vibe",
|
||||
cover: "sample/cover/2.jpg",
|
||||
link: "sample/music/2.mp3"
|
||||
}
|
||||
],
|
||||
show_list: true,
|
||||
title_change: true
|
||||
});
|
||||
</code></pre>
|
||||
<p>使播放器播放和暂停</p>
|
||||
<pre class="language-javascript"><code>player.play();
|
||||
player.pause();
|
||||
</code></pre>
|
||||
<p>使播放器添加一首新音乐</p>
|
||||
<pre class="language-javascript"><code>player.add([{
|
||||
title: "Summer Vibe",
|
||||
artist: "Walk off the Earth",
|
||||
album: "Summer Vibe",
|
||||
cover: "sample/cover/2.jpg",
|
||||
link: "sample/music/2.mp3"
|
||||
}]);
|
||||
</code></pre>
|
||||
<p>使播放器删除最后一首歌曲</p>
|
||||
<pre class="language-javascript"><code>player.remove();
|
||||
</code></pre>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<a class="to-top" href="#"></a>
|
||||
<p>© 2023 By <a href="https://paugram.com" target="_blank">Dreamer-Paul</a>.</p>
|
||||
</footer>
|
||||
|
||||
<script src="static/kico.js"></script>
|
||||
<script src="static/KPlayer.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Single@2.1/static/prism.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
/* ----
|
||||
|
||||
# Kico Player 0.9
|
||||
# By: Dreamer-Paul
|
||||
# Last Update: 2021.8.30
|
||||
|
||||
一个简洁强大的网页音乐播放器。
|
||||
|
||||
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
|
||||
|
||||
---- */
|
||||
|
||||
kplayer{
|
||||
--kp-primary: #3498db;
|
||||
--kp-secondly: #ffc670;
|
||||
--kp-gray: #aaa;
|
||||
|
||||
display: block;
|
||||
overflow: auto;
|
||||
font-size: 14px;
|
||||
line-height: 1.5em;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1);
|
||||
}
|
||||
kplayer *{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* - 面板 */
|
||||
kplayer .kp-header{
|
||||
height: 4em;
|
||||
cursor: default;
|
||||
overflow: hidden;
|
||||
line-height: 1em;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* - 专辑 */
|
||||
kplayer .kp-cover{
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
vertical-align: middle;
|
||||
transition: background .3s;
|
||||
background: var(--kp-gray) url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMqaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjUtYzAyMSA3OS4xNTQ5MTEsIDIwMTMvMTAvMjktMTE6NDc6MTYgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTNERjEzRjQzMDQzMTFFOEI5NkQ5NTkwMTU2NDBFMzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTNERjEzRjUzMDQzMTFFOEI5NkQ5NTkwMTU2NDBFMzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1M0RGMTNGMjMwNDMxMUU4Qjk2RDk1OTAxNTY0MEUzNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1M0RGMTNGMzMwNDMxMUU4Qjk2RDk1OTAxNTY0MEUzNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uACZBZG9iZQBkwAAAAAEDABUEAwYKDQAABu4AAAdjAAAJgAAAC1D/2wCEAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx8BBwcHDQwNGBAQGBoVERUaHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fH//CABEIAMgAyAMBEQACEQEDEQH/xACvAAEAAwEBAQAAAAAAAAAAAAAAAgMEBQEGAQEAAAAAAAAAAAAAAAAAAAAAEAACAgEDAwQDAQAAAAAAAAABAgADERBAEjAyBCCQMSJgcBMzEQABAwIFBQEBAAAAAAAAAAABAEARECEgMVFhEnBxgZECocESAQAAAAAAAAAAAAAAAAAAAJATAQAABAQDCAIDAAAAAAAAAAEAESExEEFRYUCBkSAw8HGhscHRkOFgcPH/2gAMAwEAAhEDEQAAAfsgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADabjOc08AAAAAAAAABI7BIHHKwAAAAAAAATOgCs2lBgNxziAAAAAAAANxuBxgbTYCg5Z4AAAAAAASOyemUvJgAwmEAAAAAAAHRNYBQZikrPDwAAAAAAAGs6IOaZQAAAAAAAAADQdQicUAAAAAAAAAAGo6QOOVgAAAAAAAAAG82ggc0oAAAAAAAAAB1i4rLAVGYoKAAAAAAAATOyDlmg2AGAxngAAAAABItNRrBlKSRqImU8PCBURAAAABqJFhMFZAAAAETKAAAAD0sJkj09AAPDwiQKzwAAAAAAA9PQDw8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//9oACAEBAAEFAv0PTUDMCWUgjakERe3R+/ZKpY10hZeuUptGJZaFCVs8FCcWUqdh476sMEcolGttfIbAHBByJZTydUVfTfXsfHP11a5BD5DQ22GcjsvHP30ttJO1o/0j9u28fv0dOLbXxhq6Bg9TLtaRiuK6tq1SND40NLjYqMtpYpFiWt6L3J64BM4SpBnS3ugYiK4MsbGvEThCCOmPiK+B/Uz+pjNy6J+Olmc5zEyOhkTmJzmdjkzJmT+Yf//aAAgBAgABBQL2cf/aAAgBAwABBQL2cf/aAAgBAgIGPwIcf//aAAgBAwIGPwIcf//aAAgBAQEGPwLoPy+vApIzbXQqe7OApNyp0XE+Kbr+qP1QWPGpCgKfr1XcMZU0n2rYeQ8sY0waq1lms2sDJsKHs6hsTWCtRq1FN9K5KxZAVMKPr3g4jJjOLdR06//aAAgBAQMBPyH+hxLhAASCmkNhl7+GGESnaJadpGMtHVwciM2P0yxvCuJQskuwlYZ5SEpls1AFcsGN44Equ7UcEERswruTDdV8iDM1gAUMK2bX1wKALkGYs4SKaRKBMjz7PxT54Getb37FNnNoQ+w9UZh5UhW6efBSkamLp5H14b3XthMS7ze3DibdDBrSGZWyduGocrHoYYq/IcL5or1wngWXxXaR1KQ3xsFqlDOfA7sMFMNyUxi0YCJMxUyF3Xv7JAc2LStiOowZp0jYdESUl3FXKE5MXTu0WWwWUEbRG0QskyUuxOfZRdbuxFoHmQeTG/3G/D5sLyIU34CbrG4xvMbjE3X+X//aAAgBAgMBPyH8OP8A/9oACAEDAwE/Ifw4/wD/2gAMAwEAAhEDEQAAEJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIBJJJJJJJJJJBIJJJJJJJJJAJJJJJJJJJJJIIBBIBJJJJJJJAJJJIJJJJJJJJJJABBJJJJJJJIJJJJJJJJJJJJJBJJJJJJJJJJJJJJJJJJJJJJJJIJJJJJJJJJJJJJABJJJJJJJIJBBIBJJJJJJIBIBJBAJJJJJJBAIAIABJJJJJJJIAAJJJJJJJJJJIAJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ//2gAIAQEDAT8Q/oc2Uy5ZlmxIANAAgUR1AobE4ZRIM20mQQWhdMSDsodeDAJTTLziSSMoyeWsTcFToaMZOwSyaYIgKUay3Ykkk3RfuGyS8l3HbSBY0HJMk4ECANxOo4E1METZi+wxyyYRGVszEsXOktzc4AAAKAUMDluc9SCIokkucA/MlE5RaGRMFJDyLOZaXKKJOqqvm9mSp0bWvhXgZvNZh5ft2E0Se6dbRRDNWr4PSLoXgylHqYJhVvwOgr9RHGwgSnhThp+R7mCTsIec3D6YO9UMABVRokBlq1snDS25oeVX3xk9tYuO0OMnhKmXCyK3M/qPTBRUmRLkvfGcMx331FSg6DL1PqCjpTQJS9+BYG5HLOAACgUDBKCWil606weS0yMp8yACCNkxkJZ1pkvoiUu+timraC3nYpBUbMh3f1jIDoPxhPjpmrMU7mPiKp6zoYINycXA8qe0NvGzWLYpqW7to0rYSFWs1Y8Mx4ZhhAprb9hSms1uvZKucd23NSgmduUhN18x9QJY9YEbM+0oXZQhc9YDZfIfcMyt2sNzU3gA7LrH+8x/rMf7zC911/l//9oACAECAwE/EPw4/wD/2gAIAQMDAT8Q/Dj/AP/Z) center/cover;
|
||||
}
|
||||
|
||||
/* - 时间 */
|
||||
kplayer .kp-time{
|
||||
left: 0;
|
||||
width: 4em;
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
display: block;
|
||||
line-height: 4em;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: opacity .3s;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
kplayer .kp-header:hover .kp-time{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* - 信息 */
|
||||
kplayer .kp-info{
|
||||
margin: .6em 6.5em .5em 5em;
|
||||
}
|
||||
kplayer .kico-title, kplayer .kico-artist{
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-bottom: .5em;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
kplayer .kico-artist{
|
||||
color: #aaa;
|
||||
color: var(--kp-gray);
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
/* - 按钮 */
|
||||
kplayer .kp-controls{
|
||||
top: 0;
|
||||
left: 4em;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
padding: .5em;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
transition: opacity .3s;
|
||||
}
|
||||
kplayer .kp-header:hover .kp-controls{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
kplayer .control-item{
|
||||
color: #3498db;
|
||||
color: var(--kp-primary);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
kplayer .control-item svg{
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
/* - 设置 */
|
||||
kplayer .kp-settings{
|
||||
top: .75em;
|
||||
right: .5em;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
kplayer .setting-item{
|
||||
width: 2em;
|
||||
color: #aaa;
|
||||
color: var(--kp-gray);
|
||||
cursor: pointer;
|
||||
line-height: 2em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
kplayer .setting-item svg{
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* - 进度条 */
|
||||
kplayer .kp-bar{
|
||||
left: 4em;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: .4em;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
background: #efefef;
|
||||
}
|
||||
kplayer .kp-bar .loaded,
|
||||
kplayer .kp-bar .played{
|
||||
top: 0;
|
||||
height: .4em;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
kplayer .kp-bar .loaded{
|
||||
background: #e5e5e5;
|
||||
}
|
||||
kplayer .kp-bar .played{
|
||||
background-color: #ffc670;
|
||||
background-color: var(--kp-secondly);
|
||||
}
|
||||
|
||||
/* 下拉载入
|
||||
-------------------------------- */
|
||||
kplayer .kp-drop{
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
transition: opacity .3s, visibility .3s;
|
||||
}
|
||||
kplayer .kp-drop.active{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
kplayer .kp-drop span{
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1em;
|
||||
margin: auto;
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* 播放列表
|
||||
-------------------------------- */
|
||||
kplayer .kp-list{
|
||||
max-height: 0;
|
||||
overflow: auto;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
transition: max-height .3s;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
kplayer .kp-list.show{
|
||||
max-height: 15em;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
kplayer .kp-list::-webkit-scrollbar{ width: 5px }
|
||||
kplayer .kp-list::-webkit-scrollbar-thumb{
|
||||
background: #eee;
|
||||
}
|
||||
kplayer .kp-list::-webkit-scrollbar-thumb:hover{
|
||||
background-color: #3498db;
|
||||
background-color: var(--kp-primary);
|
||||
}
|
||||
|
||||
kplayer .list-item{
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
padding: .75em 1em;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transition: background .3s, padding .3s;
|
||||
}
|
||||
kplayer .list-item.current{
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
kplayer .list-item.current:before{
|
||||
content: '';
|
||||
top: 1em;
|
||||
left: -.5em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: #ffc670;
|
||||
background-color: var(--kp-secondly);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
kplayer .list-item:nth-child(1n){
|
||||
background: rgba(0, 0, 0, .02);
|
||||
}
|
||||
kplayer .list-item:nth-child(2n){
|
||||
background: #fff;
|
||||
}
|
||||
kplayer .list-item:hover{
|
||||
background: rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
kplayer .item-number, kplayer .item-artist{
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
kplayer .item-number{
|
||||
margin-right: .75em;
|
||||
}
|
||||
kplayer .item-title:after{
|
||||
content: '-';
|
||||
margin: 0 .25em;
|
||||
}
|
||||
|
||||
/* 歌词
|
||||
-------------------------------- */
|
||||
kplayer .kp-lyrics{
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
kplayer .kp-lyrics span{
|
||||
padding: 1em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
line-height: 1em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
kplayer .kp-lyrics span:empty:after{
|
||||
content: "Music...";
|
||||
}
|
||||
|
|
@ -0,0 +1,602 @@
|
|||
/* ----
|
||||
|
||||
# KPlayer 0.9
|
||||
# By: Dreamer-Paul
|
||||
# Last Update: 2023.5.22
|
||||
|
||||
一个简洁强大的网页音乐播放器。
|
||||
|
||||
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
|
||||
|
||||
---- */
|
||||
|
||||
var KPlayer = function KPlayer (settings) {
|
||||
var that = this;
|
||||
|
||||
// 状态记录
|
||||
var current = {
|
||||
id: 0,
|
||||
last_id: 0,
|
||||
playlist: [],
|
||||
randlist: [],
|
||||
lyric: [],
|
||||
lyric_index: 0,
|
||||
play_mode: 0, // 默认、循环、随机模式 normal(0) loop(1) random(2)
|
||||
page_title: document.title
|
||||
};
|
||||
|
||||
var icons = {
|
||||
left: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="currentColor"><path d="M13,10c1.1,0,2,1.35,2,3v3.7l10.495-5.772C27.423,9.867,29,10.8,29,13v14c0,2.2-1.577,3.133-3.505,2.072L15,23.3V27c0,1.65-0.9,3-2,3s-2-1.35-2-3V13C11,11.35,11.9,10,13,10z"/></svg>',
|
||||
right: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="currentColor"><path d="M27,10c-1.1,0-2,1.35-2,3v3.7l-10.495-5.772C12.577,9.867,11,10.8,11,13v14c0,2.2,1.577,3.133,3.505,2.072L25,23.3V27c0,1.65,0.9,3,2,3s2-1.35,2-3V13C29,11.35,28.1,10,27,10z"/></svg>',
|
||||
play: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="currentColor"><path d="M20,0C8.954,0,0,8.954,0,20c0,11.046,8.954,20,20,20s20-8.954,20-20C40,8.954,31.046,0,20,0z M28.495,21.928l-12.99,7.145C13.577,30.133,12,29.2,12,27V13c0-2.2,1.577-3.133,3.505-2.072l12.99,7.145C30.423,19.133,30.423,20.867,28.495,21.928z"/></svg>',
|
||||
pause: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="currentColor"><path d="M20,0C8.954,0,0,8.954,0,20c0,11.046,8.954,20,20,20s20-8.954,20-20C40,8.954,31.046,0,20,0z M17,27c0,1.65-0.9,3-2,3s-2-1.35-2-3V13c0-1.65,0.9-3,2-3s2,1.35,2,3V27z M27,27c0,1.65-0.9,3-2,3s-2-1.35-2-3V13c0-1.65,0.9-3,2-3s2,1.35,2,3V27z"/></svg>',
|
||||
|
||||
none: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M18.164,24.535c-0.259,0-0.656-0.078-1.076-0.451l-4.13-3.673C12.729,20.208,12.182,20,11.875,20H10.5c-1.103,0-2-0.897-2-2v-8c0-1.103,0.897-2,2-2h1.375c0.307,0,0.854-0.208,1.083-0.412l4.13-3.671c0.42-0.374,0.817-0.452,1.076-0.452C18.828,3.465,19.5,3.992,19.5,5v18C19.5,24.008,18.828,24.535,18.164,24.535z M10.5,10v8h1.375c0.8,0,1.814,0.386,2.412,0.916l3.213,2.856V6.228l-3.213,2.855C13.689,9.614,12.675,10,11.875,10H10.5z"/></svg>',
|
||||
low: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M19.53,17.694l-0.765-1.848c0.494-0.205,0.878-0.589,1.083-1.081c0.422-1.019-0.063-2.191-1.082-2.613l0.765-1.848c2.037,0.843,3.008,3.188,2.164,5.227C21.287,16.518,20.518,17.285,19.53,17.694z"/><path d="M15.664,24.535c-0.259,0-0.656-0.078-1.076-0.451l-4.13-3.673C10.229,20.208,9.682,20,9.375,20H8c-1.103,0-2-0.897-2-2v-8c0-1.103,0.897-2,2-2h1.375c0.307,0,0.854-0.208,1.083-0.412l4.13-3.671c0.42-0.374,0.817-0.452,1.076-0.452C16.328,3.465,17,3.992,17,5v18C17,24.008,16.328,24.535,15.664,24.535z M8,10v8h1.375c0.8,0,1.814,0.386,2.412,0.916L15,21.772V6.228l-3.213,2.855C11.189,9.614,10.175,10,9.375,10H8z"/></svg>',
|
||||
mid: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M19.061,21.388l-0.766-1.848c1.482-0.614,2.637-1.767,3.248-3.244c0.612-1.478,0.611-3.108-0.003-4.591c-0.614-1.482-1.767-2.636-3.244-3.249l0.766-1.848c1.971,0.816,3.508,2.354,4.326,4.331c0.818,1.977,0.819,4.15,0.003,6.122C22.575,19.032,21.037,20.568,19.061,21.388z"/><path d="M17.53,17.694l-0.765-1.848c0.494-0.205,0.878-0.589,1.083-1.081c0.422-1.019-0.063-2.191-1.082-2.613l0.765-1.848c2.037,0.843,3.008,3.188,2.164,5.227C19.287,16.518,18.518,17.285,17.53,17.694z"/><path d="M13.664,24.535c-0.259,0-0.656-0.078-1.076-0.451l-4.13-3.673C8.229,20.208,7.682,20,7.375,20H6c-1.103,0-2-0.897-2-2v-8c0-1.103,0.897-2,2-2h1.375c0.307,0,0.854-0.208,1.083-0.412l4.13-3.671c0.42-0.374,0.817-0.452,1.076-0.452C14.328,3.465,15,3.992,15,5v18C15,24.008,14.328,24.535,13.664,24.535z M6,10v8h1.375c0.8,0,1.814,0.386,2.412,0.916L13,21.772V6.228L9.787,9.083C9.189,9.614,8.175,10,7.375,10H6z"/></svg>',
|
||||
max: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M18.593,25.086l-0.766-1.848c2.467-1.021,4.39-2.943,5.412-5.411c2.109-5.095-0.318-10.956-5.412-13.066l0.766-1.848c6.112,2.532,9.025,9.565,6.494,15.679C23.859,21.554,21.553,23.859,18.593,25.086z"/><path d="M17.061,21.388l-0.766-1.848c1.482-0.614,2.637-1.767,3.248-3.244c0.612-1.478,0.611-3.108-0.003-4.591c-0.614-1.482-1.767-2.636-3.244-3.249l0.766-1.848c1.971,0.816,3.508,2.354,4.326,4.331c0.818,1.977,0.819,4.15,0.003,6.122C20.575,19.032,19.037,20.568,17.061,21.388z"/><path d="M15.53,17.694l-0.765-1.848c0.494-0.205,0.878-0.589,1.083-1.081c0.422-1.019-0.063-2.191-1.082-2.613l0.765-1.848c2.037,0.843,3.008,3.188,2.164,5.227C17.287,16.518,16.518,17.285,15.53,17.694z"/><path d="M11.664,24.535c-0.259,0-0.656-0.078-1.076-0.451l-4.13-3.673C6.229,20.208,5.682,20,5.375,20H4c-1.103,0-2-0.897-2-2v-8c0-1.103,0.897-2,2-2h1.375c0.307,0,0.854-0.208,1.083-0.412l4.13-3.671c0.42-0.374,0.817-0.452,1.076-0.452C12.328,3.465,13,3.992,13,5v18C13,24.008,12.328,24.535,11.664,24.535z M4,10v8h1.375c0.8,0,1.814,0.386,2.412,0.916L11,21.772V6.228L7.787,9.083C7.189,9.614,6.175,10,5.375,10H4z"/></svg>',
|
||||
|
||||
loop_all: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M9.2,20.4C6.7,19.3,5,16.8,5,14c0-3.9,3.1-7,7-7h1.6l-1.8,1.8c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l3.5-3.5c0.4-0.4,0.4-1,0-1.4l-3.5-3.5c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4L13.6,5H12c-5,0-9,4-9,9c0,3.6,2.1,6.8,5.4,8.3c0.1,0.1,0.3,0.1,0.4,0.1c0.4,0,0.8-0.2,0.9-0.6C10,21.2,9.7,20.6,9.2,20.4z"/><path d="M25,14c0-3.6-2.2-6.9-5.5-8.3c-0.5-0.2-1.1,0-1.3,0.5c-0.2,0.5,0,1.1,0.5,1.3C21.3,8.6,23,11.2,23,14c0,3.9-3.1,7-7,7h-1.6l1.8-1.8c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-3.5,3.5c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l3.5,3.5c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L14.4,23H16C21,23,25,19,25,14z"/></svg>',
|
||||
loop_single: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M9.2,20.4C6.7,19.3,5,16.8,5,14c0-3.9,3.1-7,7-7h1.6l-1.8,1.8c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l3.5-3.5c0.4-0.4,0.4-1,0-1.4l-3.5-3.5c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4L13.6,5H12c-5,0-9,4-9,9c0,3.6,2.1,6.8,5.4,8.3c0.1,0.1,0.3,0.1,0.4,0.1c0.4,0,0.8-0.2,0.9-0.6C10,21.2,9.7,20.6,9.2,20.4z"/><path d="M25,14c0-3.6-2.2-6.9-5.5-8.3c-0.5-0.2-1.1,0-1.3,0.5c-0.2,0.5,0,1.1,0.5,1.3C21.3,8.6,23,11.2,23,14c0,3.9-3.1,7-7,7h-1.6l1.8-1.8c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-3.5,3.5c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l3.5,3.5c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L14.4,23H16C21,23,25,19,25,14z"/><path d="M14,17c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1s1,0.4,1,1v4C15,16.6,14.6,17,14,17z"/></svg>',
|
||||
rand: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M21.334,13.167c-0.305,0-0.604-0.138-0.801-0.4c-0.332-0.442-0.242-1.069,0.2-1.4l2.6-1.95l-2.6-1.95c-0.442-0.331-0.532-0.958-0.2-1.4c0.331-0.441,0.958-0.532,1.399-0.2l3.667,2.75c0.252,0.188,0.4,0.485,0.4,0.8s-0.148,0.611-0.4,0.8l-3.667,2.75C21.753,13.102,21.543,13.167,21.334,13.167z"/><path d="M3,20.5c-0.552,0-1-0.447-1-1s0.448-1,1-1c3.659,0,7.084-1.888,9.165-5.05c2.748-4.178,6.63-5.034,11.613-5.034c0.553,0,1,0.448,1,1s-0.447,1-1,1c-4.459,0-7.678,0.691-9.942,4.133C11.384,18.275,7.334,20.5,3,20.5z"/><path d="M21.334,22.333c-0.305,0-0.604-0.138-0.801-0.4c-0.332-0.441-0.242-1.068,0.2-1.399l2.6-1.95l-2.6-1.95c-0.442-0.331-0.532-0.958-0.2-1.399c0.331-0.442,0.958-0.532,1.399-0.2l3.667,2.75c0.252,0.188,0.4,0.485,0.4,0.8s-0.148,0.611-0.4,0.8l-3.667,2.75C21.753,22.268,21.543,22.333,21.334,22.333z"/><path d="M23.777,19.583c-4.983,0-8.865-0.856-11.613-5.033C10.084,11.388,6.659,9.5,3,9.5c-0.552,0-1-0.448-1-1s0.448-1,1-1c4.334,0,8.384,2.225,10.835,5.95c2.264,3.441,5.482,4.133,9.942,4.133c0.553,0,1,0.447,1,1S24.33,19.583,23.777,19.583z"/></svg>',
|
||||
|
||||
list: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M25,8H3C2.448,8,2,7.552,2,7s0.448-1,1-1h22c0.553,0,1,0.448,1,1S25.553,8,25,8z"/><path d="M25,15H3c-0.552,0-1-0.448-1-1s0.448-1,1-1h22c0.553,0,1,0.448,1,1S25.553,15,25,15z"/><path d="M25,22H3c-0.552,0-1-0.447-1-1s0.448-1,1-1h22c0.553,0,1,0.447,1,1S25.553,22,25,22z"/></svg>'
|
||||
};
|
||||
|
||||
// 小工具
|
||||
var tools = {
|
||||
// 拖拽文件名称识别
|
||||
name: function (filename) {
|
||||
filename = filename.replace(/\.ogg|\.mp3|\.wav|\.mp4?/, "");
|
||||
var sp = filename.split(/\s\-\s|\s\–\s/);
|
||||
return {title: sp[1], artist: sp[0]};
|
||||
},
|
||||
// 快捷创建对象
|
||||
create: function (tag, set) {
|
||||
var obj = document.createElement(tag);
|
||||
|
||||
if(!set) return obj;
|
||||
|
||||
if(set.class) obj.className = set.class;
|
||||
if(set.text) obj.innerText = set.text;
|
||||
if(set.html) obj.innerHTML = set.html;
|
||||
|
||||
return obj;
|
||||
},
|
||||
// 快捷添加对象
|
||||
append: function (obj, child) {
|
||||
for(var i = 0; i < child.length; i++){
|
||||
obj.appendChild(child[i]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 元素模块
|
||||
var elements = {
|
||||
container: tools.create("kplayer"),
|
||||
player: document.createElement("audio"),
|
||||
buttons: { // 操作按钮
|
||||
toggle: tools.create("div", { class: "control-item kico-toggle", html: icons.play }),
|
||||
prev: tools.create("div", { class: "control-item kico-prev", html: icons.left }),
|
||||
next: tools.create("div", { class: "control-item kico-next", html: icons.right }),
|
||||
mode: tools.create("div", { class: "setting-item kico-mode", html: icons.loop_all }),
|
||||
list: tools.create("div", { class: "setting-item kico-list", html: icons.list }),
|
||||
volume: tools.create("div", { class: "setting-item kico-volume", html: icons.max })
|
||||
},
|
||||
details: { // 歌曲详情
|
||||
title: tools.create("span", { class: "kico-title", text: "欢迎使用 Kico Player" }),
|
||||
artist: tools.create("span", { class: "kico-artist", text: "奇趣保罗" }),
|
||||
cover: tools.create("div", { class: "kp-cover" }),
|
||||
time: tools.create("div", { class: "kp-time", text: "00:00" })
|
||||
},
|
||||
bar: { // 播放进度条
|
||||
wrap: tools.create("div", { class: "kp-bar" }),
|
||||
loaded: tools.create("div", { class: "loaded" }),
|
||||
played: tools.create("div", { class: "played" })
|
||||
},
|
||||
playlist: tools.create("div", { class: "kp-list" }),
|
||||
lyric: tools.create("span", { text: "欢迎使用 Kico Player" }),
|
||||
list_items: []
|
||||
};
|
||||
|
||||
// 事件
|
||||
var events = {
|
||||
onPlay: () => {
|
||||
if (!interval) interval = setInterval(interval_fc, 500);
|
||||
|
||||
elements.buttons.toggle.innerHTML = icons.pause;
|
||||
actions.title_change(true);
|
||||
},
|
||||
onPause: () => {
|
||||
interval = clearInterval(interval);
|
||||
elements.buttons.toggle.innerHTML = icons.play;
|
||||
actions.title_change(false);
|
||||
},
|
||||
onProgress: () => {
|
||||
const player = elements.player;
|
||||
const percentage = player.buffered.length ? (
|
||||
player.buffered.end(player.buffered.length - 1) / player.duration
|
||||
) : 0;
|
||||
|
||||
elements.bar.loaded.style.width = percentage * 100 + "%";
|
||||
},
|
||||
onError: () => {
|
||||
interval = clearInterval(interval);
|
||||
elements.buttons.toggle.innerHTML = icons.play;
|
||||
actions.title_change(false);
|
||||
|
||||
elements.details.title.innerText = ":(";
|
||||
elements.details.artist.innerText = "发生了错误";
|
||||
},
|
||||
onEnd: () => {
|
||||
// 列表和随机列表循环
|
||||
if(current.play_mode === 0 || current.play_mode === 2){
|
||||
this.next();
|
||||
}
|
||||
// 单曲循环
|
||||
else if(current.play_mode === 1){
|
||||
current.lyric_index = 0;
|
||||
this.play();
|
||||
elements.lyric.innerText = current.playlist[current.id].title + " (" + current.playlist[current.id].artist + ")";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var wrapper = {
|
||||
wrap: tools.create("div", { class: "kp-header" }),
|
||||
info: tools.create("div", { class: "kp-info" }),
|
||||
ctrl: tools.create("div", { class: "kp-controls" }),
|
||||
sets: tools.create("div", { class: "kp-settings" }),
|
||||
lyric: tools.create("div", { class: "kp-lyrics" }),
|
||||
drop: tools.create("div", { class: "kp-drop", html: "<span>释放鼠标以添加歌曲</span>" })
|
||||
};
|
||||
|
||||
var interval;
|
||||
var interval_fc = function () {
|
||||
actions.update_time();
|
||||
actions.update_bar();
|
||||
actions.update_lyric_playing();
|
||||
};
|
||||
|
||||
// 构造模块
|
||||
var build = {
|
||||
elements: function () {
|
||||
// 歌手歌名
|
||||
tools.append(wrapper.info, [elements.details.title, elements.details.artist]);
|
||||
|
||||
// 控制按钮
|
||||
tools.append(wrapper.ctrl, [elements.buttons.prev, elements.buttons.toggle, elements.buttons.next]);
|
||||
|
||||
// 设置按钮
|
||||
tools.append(wrapper.sets, [elements.buttons.volume, elements.buttons.mode, elements.buttons.list]);
|
||||
|
||||
// 整体框架
|
||||
tools.append(wrapper.wrap, [elements.details.cover, elements.details.time, wrapper.info, wrapper.ctrl, wrapper.sets, elements.bar.wrap]);
|
||||
|
||||
wrapper.lyric.appendChild(elements.lyric);
|
||||
|
||||
tools.append(elements.container, [wrapper.wrap, elements.playlist, wrapper.lyric, wrapper.drop]);
|
||||
settings.container.appendChild(elements.container); // 总添加
|
||||
|
||||
// 拖动播放
|
||||
elements.container.ondragenter = function (e) {
|
||||
e.preventDefault();
|
||||
wrapper.drop.classList.add("active");
|
||||
};
|
||||
elements.container.ondragover = function (e) {
|
||||
e.preventDefault();
|
||||
wrapper.drop.classList.add("active");
|
||||
};
|
||||
elements.container.ondrag = function (e) {
|
||||
e.preventDefault();
|
||||
wrapper.drop.classList.add("active");
|
||||
};
|
||||
elements.container.ondragleave = function (e) {
|
||||
e.preventDefault();
|
||||
wrapper.drop.classList.remove("active");
|
||||
};
|
||||
elements.container.ondrop = function (e) {
|
||||
e.preventDefault();
|
||||
wrapper.drop.classList.remove("active");
|
||||
var arr = [];
|
||||
|
||||
for(var i = 0; i < e.dataTransfer.items.length; i++){
|
||||
var s = e.dataTransfer.items[i].getAsFile();
|
||||
|
||||
if (window.createObjectURL) {
|
||||
url = window.createObjectURL(s)
|
||||
}
|
||||
else if (window.createBlobURL) {
|
||||
url = window.createBlobURL(s)
|
||||
}
|
||||
else if (window.URL && window.URL.createObjectURL) {
|
||||
url = window.URL.createObjectURL(s)
|
||||
}
|
||||
else if (window.webkitURL && window.webkitURL.createObjectURL) {
|
||||
url = window.webkitURL.createObjectURL(s)
|
||||
}
|
||||
|
||||
var n = tools.name(s.name);
|
||||
|
||||
arr.push({
|
||||
title: n.title,
|
||||
artist: n.artist,
|
||||
link: url
|
||||
});
|
||||
}
|
||||
|
||||
that.add(arr);
|
||||
that.jump(current.playlist.length - 1);
|
||||
};
|
||||
|
||||
// 播放器
|
||||
elements.player.volume = 1;
|
||||
|
||||
elements.player.addEventListener("play", events.onPlay);
|
||||
elements.player.addEventListener("pause", events.onPause);
|
||||
elements.player.addEventListener("progress", events.onProgress);
|
||||
elements.player.addEventListener("error", events.onError);
|
||||
elements.player.addEventListener("ended", events.onEnd);
|
||||
|
||||
// 按钮们
|
||||
elements.buttons.toggle.addEventListener("click", that.toggle);
|
||||
elements.buttons.prev.addEventListener("click", that.prev);
|
||||
elements.buttons.next.addEventListener("click", that.next);
|
||||
elements.buttons.mode.addEventListener("click", that.mode);
|
||||
elements.buttons.list.addEventListener("click", that.toggle_list);
|
||||
elements.buttons.volume.addEventListener("click", that.toggle_volume);
|
||||
|
||||
// 进度条
|
||||
elements.bar.wrap.appendChild(elements.bar.loaded);
|
||||
elements.bar.wrap.appendChild(elements.bar.played);
|
||||
elements.bar.wrap.addEventListener("click", function (t) {
|
||||
if (!elements.player.currentTime) return;
|
||||
|
||||
elements.player.currentTime = (t.offsetX / elements.bar.wrap.clientWidth) * elements.player.duration;
|
||||
actions.update_bar();
|
||||
actions.update_time();
|
||||
|
||||
current.lyric.length && actions.update_lyric();
|
||||
});
|
||||
},
|
||||
playlist: function (item) {
|
||||
function add(s) {
|
||||
current.playlist.push(s);
|
||||
current.randlist.push(s);
|
||||
|
||||
var id = current.playlist.length - 1;
|
||||
var li = tools.create("div", { class: "list-item" });
|
||||
|
||||
li.innerHTML = "<span class='item-number'>" + (id + 1) +
|
||||
"</span><span class='item-title'>" + current.playlist[id].title +
|
||||
"</span><span class='item-artist'>" + current.playlist[id].artist + "</span>";
|
||||
|
||||
li.onclick = function () {
|
||||
if(current.id === id){
|
||||
that.toggle();
|
||||
}
|
||||
else {
|
||||
current.id = id;
|
||||
that.jump(current.id);
|
||||
}
|
||||
};
|
||||
|
||||
elements.playlist.appendChild(li);
|
||||
elements.list_items.push(li);
|
||||
}
|
||||
|
||||
item.forEach(function (t) {
|
||||
add(t);
|
||||
});
|
||||
},
|
||||
randlist: function () {
|
||||
for(var i = 0; i < current.randlist.length - 1; i++){
|
||||
i++;
|
||||
var a = calc.random(0, current.randlist.length - 1);
|
||||
var b = calc.random(0, current.randlist.length - 1);
|
||||
var cache = current.randlist[a];
|
||||
|
||||
current.randlist[a] = current.randlist[b];
|
||||
current.randlist[b] = cache;
|
||||
}
|
||||
},
|
||||
lyric: function (lyric, sub_lyric) {
|
||||
if (!lyric) {
|
||||
current.lyric = [];
|
||||
elements.lyric.innerText = "纯音乐，请欣赏...";
|
||||
return;
|
||||
}
|
||||
|
||||
elements.lyric.innerText = `${current.playlist[current.id].title} (${current.playlist[current.id].artist})`;
|
||||
|
||||
var time, text, sub_text;
|
||||
|
||||
// var text = lyric.match(/\[[0-9]{2,}:[0-9]{2}\.[0-9]{2,}\](\S| )+/g).replace(/\[[0-9]{2,}:[0-9]{2}\.[0-9]{2,}\]/g);
|
||||
|
||||
time = lyric.match(/\d{2,}:\d{2,}.\d{1,4}/g);
|
||||
text = lyric.match(/\d{1}\]+.*/g);
|
||||
|
||||
if(sub_lyric) sub_text = sub_lyric.match(/\d{1}\]+.*/g);
|
||||
|
||||
if(settings.debug) console.log(time, text, sub_text);
|
||||
|
||||
// 时间和歌词数量解析结果对的上
|
||||
if (time && (time.length === text.length)) {
|
||||
current.lyric = time.map((item, index) => {
|
||||
const _range = item.match(/\d+/g);
|
||||
const min = parseInt(_range[0] * 60);
|
||||
const sec = parseInt(_range[1]);
|
||||
const ms = parseFloat(_range[2].substr(0, 2) / 60);
|
||||
|
||||
const _lyric = {
|
||||
time: min + sec + ms,
|
||||
text: text[index].substr(2)
|
||||
}
|
||||
|
||||
if (sub_text && text.length === sub_text.length) {
|
||||
_lyric.sub_text = sub_text[index].substr(2);
|
||||
}
|
||||
|
||||
return _lyric;
|
||||
});
|
||||
|
||||
if(settings.debug) console.log(current.lyric);
|
||||
}
|
||||
else {
|
||||
current.lyric = [{
|
||||
time: 0,
|
||||
text: "当前歌词不支持滚动"
|
||||
}];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 播放与暂停切换
|
||||
this.play = function () {
|
||||
elements.player.src && elements.player.play();
|
||||
};
|
||||
this.pause = function () {
|
||||
elements.player.src && elements.player.pause();
|
||||
};
|
||||
this.toggle = function () {
|
||||
if(elements.player.src){
|
||||
elements.player.paused ? elements.player.play() : elements.player.pause();
|
||||
}
|
||||
else{
|
||||
that.jump(current.id);
|
||||
}
|
||||
};
|
||||
|
||||
this.jump = function (id) {
|
||||
if(id === undefined) return;
|
||||
|
||||
// 更新信息
|
||||
current.id = id;
|
||||
current.lyric_index = 0;
|
||||
|
||||
elements.details.title.innerText = current.playlist[current.id].title;
|
||||
elements.details.artist.innerText = current.playlist[current.id].artist;
|
||||
elements.details.cover.style.backgroundImage = current.playlist[current.id].cover ? "url('" + current.playlist[current.id].cover + "')" : "";
|
||||
elements.player.src = current.playlist[current.id].link;
|
||||
elements.player.play();
|
||||
|
||||
if("mediaSession" in navigator){
|
||||
var _meta = {
|
||||
title: current.playlist[current.id].title,
|
||||
artist: current.playlist[current.id].artist,
|
||||
};
|
||||
|
||||
if(current.playlist[current.id].album) _meta.album = current.playlist[current.id].album;
|
||||
if(current.playlist[current.id].cover) _meta.artwork = [{ src: current.playlist[current.id].cover }]
|
||||
|
||||
navigator.mediaSession.metadata = new MediaMetadata(_meta);
|
||||
navigator.mediaSession.setActionHandler("play", that.play);
|
||||
navigator.mediaSession.setActionHandler("pause", that.pause);
|
||||
navigator.mediaSession.setActionHandler("previoustrack", that.prev);
|
||||
navigator.mediaSession.setActionHandler("nexttrack", that.next);
|
||||
}
|
||||
|
||||
// 上次播放记录
|
||||
if(elements.list_items[current.last_id]) elements.list_items[current.last_id].classList.remove("current");
|
||||
elements.list_items[current.id].classList.add("current");
|
||||
current.last_id = current.id;
|
||||
|
||||
// 如果有歌词则处理歌词
|
||||
build.lyric(current.playlist[current.id].lyric, current.playlist[current.id].sub_lyric);
|
||||
|
||||
if(settings.debug) console.log("当前 ID：" + current.id);
|
||||
};
|
||||
|
||||
// 上一首
|
||||
this.prev = function () {
|
||||
if(current.play_mode === 0 || current.play_mode === 1) {
|
||||
current.id > 0 ? current.id-- : current.id = current.playlist.length - 1;
|
||||
that.jump(current.id);
|
||||
}
|
||||
else if(current.play_mode === 2){
|
||||
var a = current.randlist.indexOf(current.playlist[current.id]);
|
||||
a === 0 ? current.id = current.randlist.length - 1 : current.id = current.playlist.indexOf(current.randlist[a - 1]);
|
||||
that.jump(current.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 下一首
|
||||
this.next = function () {
|
||||
current.lyric_index = 0;
|
||||
|
||||
if(current.play_mode === 0 || current.play_mode === 1){
|
||||
current.id < current.playlist.length-1 ? current.id++ : current.id = 0;
|
||||
that.jump(current.id);
|
||||
}
|
||||
else if(current.play_mode === 2){
|
||||
var a = current.randlist.indexOf(current.playlist[current.id]);
|
||||
a === current.randlist.length - 1 ? current.id = current.playlist.indexOf(current.randlist[0]) : current.id = current.playlist.indexOf(current.randlist[a + 1]);
|
||||
that.jump(current.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 播放模式
|
||||
this.mode = function () {
|
||||
var btn = elements.buttons.mode;
|
||||
|
||||
switch (current.play_mode){
|
||||
case 0: current.play_mode = 1; btn.innerHTML = icons.loop_single; break;
|
||||
case 1: current.play_mode = 2; btn.innerHTML = icons.rand; build.randlist(); break;
|
||||
case 2: current.play_mode = 0; btn.innerHTML = icons.loop_all; break;
|
||||
}
|
||||
|
||||
if(settings.debug) console.log("当前播放模式：" + current.play_mode);
|
||||
};
|
||||
|
||||
// 添加歌曲
|
||||
this.add = function (item) {
|
||||
build.playlist(item);
|
||||
};
|
||||
|
||||
// 移除歌曲
|
||||
this.remove = function () {
|
||||
if(current.playlist.length > 0){
|
||||
if(current.randlist){
|
||||
var del = current.randlist.indexOf(current.playlist[current.playlist.length - 1]);
|
||||
current.randlist.splice(del, 1);
|
||||
}
|
||||
elements.playlist.removeChild(elements.list_items[elements.list_items.length - 1]);
|
||||
current.playlist.pop();
|
||||
elements.list_items.pop();
|
||||
}
|
||||
};
|
||||
|
||||
// 播放列表切换显示
|
||||
this.toggle_list = function () {
|
||||
elements.playlist.classList.toggle("show");
|
||||
};
|
||||
|
||||
// 切换音量
|
||||
this.toggle_volume = function () {
|
||||
var btn = elements.buttons.volume;
|
||||
var player = elements.player;
|
||||
|
||||
switch (player.volume){
|
||||
case 1: player.volume = 0.75; btn.innerHTML = icons.mid; break;
|
||||
case 0.75: player.volume = 0.50; btn.innerHTML = icons.low; break;
|
||||
case 0.50: player.volume = 0.25; btn.innerHTML = icons.none; break;
|
||||
case 0.25: player.volume = 1; btn.innerHTML = icons.max; break;
|
||||
}
|
||||
};
|
||||
|
||||
// 卸载播放器
|
||||
this.destroy = function () {
|
||||
events.onPause();
|
||||
elements.player.pause();
|
||||
|
||||
elements.player.removeEventListener("play", events.onPlay);
|
||||
elements.player.removeEventListener("pause", events.onPause);
|
||||
elements.player.removeEventListener("progress", events.onProgress);
|
||||
elements.player.removeEventListener("error", events.onError);
|
||||
elements.player.removeEventListener("ended", events.onEnd);
|
||||
|
||||
elements.buttons.toggle.removeEventListener("click", that.toggle);
|
||||
elements.buttons.prev.removeEventListener("click", that.prev);
|
||||
elements.buttons.next.removeEventListener("click", that.next);
|
||||
elements.buttons.mode.removeEventListener("click", that.mode);
|
||||
elements.buttons.list.removeEventListener("click", that.toggle_list);
|
||||
elements.buttons.volume.removeEventListener("click", that.toggle_volume);
|
||||
|
||||
elements.player = undefined;
|
||||
elements.buttons = undefined;
|
||||
|
||||
elements.container.remove();
|
||||
}
|
||||
|
||||
// 事件模块
|
||||
var actions = {
|
||||
// 拖拽进度条更新歌词
|
||||
update_lyric: function () {
|
||||
var num = 0;
|
||||
|
||||
current.lyric.forEach(function (t, index) {
|
||||
if(elements.player.currentTime > t.time){
|
||||
num = index;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
current.lyric_index = num;
|
||||
|
||||
if(current.lyric[num].sub_text){
|
||||
elements.lyric.innerHTML = current.lyric[num].text.toString() + "<br><br>" + current.lyric[num].sub_text.toString();
|
||||
}
|
||||
else{
|
||||
elements.lyric.innerText = current.lyric[num].text.toString();
|
||||
}
|
||||
},
|
||||
// 播放过程中更新歌词
|
||||
update_lyric_playing: function () {
|
||||
if(!current.lyric.length) return;
|
||||
|
||||
if(current.lyric[current.lyric_index] && elements.player.currentTime > current.lyric[current.lyric_index].time){
|
||||
elements.lyric.innerText = current.lyric[current.lyric_index].text;
|
||||
if(current.lyric[current.lyric_index].sub_text){
|
||||
elements.lyric.innerHTML = current.lyric[current.lyric_index].text + "<br><br>" + current.lyric[current.lyric_index].sub_text;
|
||||
}
|
||||
else{
|
||||
elements.lyric.innerText = current.lyric[current.lyric_index].text;
|
||||
}
|
||||
current.lyric_index++;
|
||||
}
|
||||
},
|
||||
update_time: function () {
|
||||
elements.details.time.innerText = calc.sec_time(elements.player.currentTime);
|
||||
},
|
||||
update_bar: function () {
|
||||
elements.bar.played.style.width = (elements.player.currentTime / elements.player.duration) * 100 + "%";
|
||||
},
|
||||
title_change: function (stat) {
|
||||
settings.title_change && current.playlist[current.id] && stat === true ? document.title = "▶ " + current.playlist[current.id].title + " - " + current.page_title : document.title = current.page_title;
|
||||
}
|
||||
};
|
||||
|
||||
// 计算函数
|
||||
var calc = {
|
||||
add_zero: function (num) {
|
||||
return num < 10 ? "0" + num : num;
|
||||
},
|
||||
sec_time: function (second) {
|
||||
if(isNaN(second)){
|
||||
return "00:00";
|
||||
}
|
||||
else{
|
||||
var min = parseInt(second / 60);
|
||||
var sec = parseInt(second - min * 60);
|
||||
var hours = parseInt(min / 60);
|
||||
var minAdjust = parseInt(second / 60 - 60 * parseInt(second / 60 / 60));
|
||||
|
||||
return second >= 3600 ? `${calc.add_zero(hours)}:${calc.add_zero(minAdjust)}:${calc.add_zero(sec)}` : `${calc.add_zero(min)}:${calc.add_zero(sec)}`;
|
||||
}
|
||||
},
|
||||
random: function (min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
};
|
||||
|
||||
// 执行函数
|
||||
(function () {
|
||||
build.elements();
|
||||
build.playlist(settings.playlist);
|
||||
|
||||
if(settings.show_list === true){
|
||||
that.toggle_list();
|
||||
}
|
||||
if(settings.debug){
|
||||
console.log("MP3 兼容情况：" + elements.player.canPlayType("audio/mp3"));
|
||||
console.log("OGG 兼容情况：" + elements.player.canPlayType("audio/ogg"));
|
||||
console.log("WAV 兼容情况：" + elements.player.canPlayType("audio/wav"));
|
||||
}
|
||||
|
||||
var user_agent = navigator.userAgent.toLowerCase().match(/mobile/g);
|
||||
|
||||
if(settings.autoplay === true && user_agent === null) that.jump(current.id);
|
||||
})();
|
||||
};
|
||||
|
||||
console.log("%c Kico Player %c https://paugram.com ","color: #fff; margin: 1em 0; padding: 5px 0; background: #3498db;","margin: 1em 0; padding: 5px 0; background: #efefef;");
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
/* ----
|
||||
|
||||
# Kico Player Docs
|
||||
# By: Dreamer-Paul
|
||||
# Last Update: 2021.9.5
|
||||
|
||||
---- */
|
||||
|
||||
/* 0 - 全局
|
||||
-------------------------------- */
|
||||
:root{
|
||||
--light-blue: #57c4fd;
|
||||
--darker-gray: #666;
|
||||
}
|
||||
|
||||
body{
|
||||
margin-left: 3.5em;
|
||||
}
|
||||
|
||||
body.has-bar{
|
||||
margin-left: 15.5em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px){
|
||||
body, body.has-bar{
|
||||
margin-top: 3.5em;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3{ font-weight: lighter }
|
||||
h4, h5, h6{ font-weight: normal }
|
||||
|
||||
.btn.customed{ border-radius: 3em }
|
||||
|
||||
.btn.blue.customed{
|
||||
background: #57c4fd;
|
||||
box-shadow: 0 4px #41a5cd;
|
||||
transition: background .3s, box-shadow .3s, transform .3s;
|
||||
}
|
||||
.btn.blue.customed:active{
|
||||
box-shadow: none;
|
||||
background: #41a5cd;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
.mb-2{ margin-bottom: 2em !important }
|
||||
|
||||
/* 1 - 页眉
|
||||
-------------------------------- */
|
||||
.sidebar{
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
background-color: #57c4fd;
|
||||
background-color: var(--light-blue);
|
||||
}
|
||||
|
||||
.sidebar img, .sidebar svg{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sidebar .header{
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
background: #3fb2ed;
|
||||
}
|
||||
|
||||
.sidebar .header img{
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
.sidebar .title{
|
||||
display: none;
|
||||
margin-left: .25em;
|
||||
}
|
||||
|
||||
.sidebar .menu a{
|
||||
color: #fff;
|
||||
padding: 1em;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar .menu a:hover svg{
|
||||
transform: scale(1.1)
|
||||
}
|
||||
.sidebar .menu svg{
|
||||
fill: #fff;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
.sidebar .menu a:before, .sidebar .menu a:after{
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.sidebar .menu a:before{
|
||||
left: 3em;
|
||||
top: 1.25em;
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: .5em solid transparent;
|
||||
border-right-color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
.sidebar .menu a:after{
|
||||
top: .5em;
|
||||
left: 4em;
|
||||
padding: .5em 1em;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
border-radius: .5em;
|
||||
content: attr(content);
|
||||
background: rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
.sidebar .menu a:hover:before, .sidebar .menu a:hover:after{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px){
|
||||
.sidebar{
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.sidebar .header{ float: left }
|
||||
.sidebar .title{ display: inline-block }
|
||||
.sidebar .menu{ float: right }
|
||||
.sidebar .menu a{ float: left }
|
||||
|
||||
.sidebar .menu a:before{
|
||||
top: 3em;
|
||||
left: 1.25em;
|
||||
border-color: transparent;
|
||||
border-bottom-color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
.sidebar .menu a:after{
|
||||
top: 4em;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-sidebar{
|
||||
top: 0;
|
||||
left: 3.5em;
|
||||
bottom: 0;
|
||||
width: 12em;
|
||||
padding: 1em;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
.sub-sidebar > ul{
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.sub-sidebar > ul > li{
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.sub-sidebar > ul > li > ul a{
|
||||
color: #555;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.sub-sidebar a{
|
||||
color: inherit;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px){
|
||||
.sub-sidebar{
|
||||
left: -12em;
|
||||
top: 3.5em;
|
||||
background: #fff;
|
||||
border-right: none;
|
||||
transition: transform .3s;
|
||||
}
|
||||
.sub-sidebar.active{
|
||||
outline: 50em solid rgba(0, 0, 0, .5);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 2 - 主体内容
|
||||
-------------------------------- */
|
||||
main .ks-title{
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
margin-bottom: 2em;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
main .ks-title h2{ color: #666; font-size: 1.25em }
|
||||
|
||||
main .ks-content{
|
||||
margin-bottom: 2em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
main .ks-content section{ margin-bottom: 5em }
|
||||
main .ks-content section:last-child{ margin-bottom: 0 }
|
||||
|
||||
main .ks-content section > *{ margin-bottom: 1em }
|
||||
main .ks-content section > *:last-child{ margin-bottom: 0 }
|
||||
|
||||
main .ks-content h1{
|
||||
color: #666;
|
||||
color: var(--darker-gray);
|
||||
font-size: 1.5em;
|
||||
position: relative;
|
||||
margin-bottom: 1.5em;
|
||||
padding-bottom: .5em;
|
||||
display: inline-block;
|
||||
scroll-margin-top: 5em;
|
||||
}
|
||||
main .ks-content h1:before{
|
||||
content: "";
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
width: 1.5em;
|
||||
position: absolute;
|
||||
border-radius: 1em;
|
||||
border-bottom: .25em solid var(--yellow);
|
||||
}
|
||||
|
||||
main .ks-content h2:before{
|
||||
content: "#";
|
||||
color: var(--light-blue);
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
main .ks-content iframe{
|
||||
width: 100%;
|
||||
height: 15em;
|
||||
}
|
||||
|
||||
main .more-product{
|
||||
padding: 1.5em;
|
||||
border-radius: 1em;
|
||||
background: #fafafa;
|
||||
}
|
||||
main .more-product + .more-product{ margin-top: 1em }
|
||||
|
||||
main .more-product h4{
|
||||
color: #666;
|
||||
color: var(--darker-gray);
|
||||
}
|
||||
|
||||
.show-notice .ks-notice{
|
||||
animation: none;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.doc-show-column{
|
||||
color: #fff;
|
||||
padding: 1em;
|
||||
background: #3fb2ed;
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
|
||||
/* 3 - 页尾
|
||||
-------------------------------- */
|
||||
footer{
|
||||
color: #666;
|
||||
padding: 1em 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* 返回页首 */
|
||||
footer .to-top{
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
width: 2em;
|
||||
right: 1em;
|
||||
bottom: -2em;
|
||||
display: block;
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
transition: background .3s, bottom .3s;
|
||||
}
|
||||
footer .to-top.active{
|
||||
bottom: .85em;
|
||||
}
|
||||
footer .to-top:hover {
|
||||
color: #fff;
|
||||
background: #ffc670;
|
||||
}
|
||||
footer .to-top:before{
|
||||
content: "\f106";
|
||||
font: 1em/2em "FontAwesome";
|
||||
}
|
||||
|
||||
|
||||
/* 4 - 附加
|
||||
-------------------------------- */
|
||||
.gt-container .gt-meta{ z-index: auto !important }
|
||||
.gt-comment-text, .gt-header-controls-tip{ display: none }
|
||||
|
||||
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata{ color: slategray }
|
||||
.token.punctuation{ color: #f8f8f2 }
|
||||
.token.namespace { opacity: .7 }
|
||||
.token.property, .token.tag, .token.function-name, .token.constant, .token.symbol, .token.deleted{ color: #f92672 }
|
||||
.token.boolean, .token.number { color: #ae81ff }
|
||||
.token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted{ color: #a6e22e }
|
||||
|
||||
.token.operator, .token.entity, .token.url, .token.variable{ color: #f8f8f2 }
|
||||
.token.atrule, .token.attr-value, .token.class-name{ color: #e6db74 }
|
||||
.token.keyword { color: #66d9ef }
|
||||
.token.regex, .token.important{ color: #fd971f }
|
||||
|
||||
.language-css .token.string, .style .token.string { color: #28b9be }
|
||||
|
||||
.token.important, .token.bold { font-weight: bold }
|
||||
.token.italic { font-style: italic }
|
||||
.token.entity { cursor: help }
|
||||
.token.important { font-weight: normal }
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/* ----
|
||||
|
||||
# Kico Player Docs
|
||||
# By: Dreamer-Paul
|
||||
# Last Update: 2021.9.5
|
||||
|
||||
---- */
|
||||
|
||||
var app = function () {
|
||||
|
||||
}
|
||||
|
||||
app();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 609 B |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,346 @@
|
|||
/* ----
|
||||
|
||||
# Kico Style 2.1
|
||||
# By: Dreamer-Paul
|
||||
# Last Update: 2018.12.25
|
||||
|
||||
一个简洁、有趣的开源响应式框架，仅包含基础样式，需按照一定规则进行二次开发。
|
||||
|
||||
欢迎你加入缤奇，和我们一起改变世界。
|
||||
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
|
||||
|
||||
---- */
|
||||
|
||||
function Kico_Style () {
|
||||
var kico = {};
|
||||
var that = this;
|
||||
|
||||
// 批量执行
|
||||
this.forEach = function (data, fn) {
|
||||
for(var i = 0; i < data.length; i++){
|
||||
fn(data[i], i, data);
|
||||
}
|
||||
};
|
||||
|
||||
// 对象创建
|
||||
this.create = function (tag, prop) {
|
||||
var obj = document.createElement(tag);
|
||||
|
||||
if(prop){
|
||||
if(prop.id) obj.id = prop.id;
|
||||
if(prop.href) obj.href = prop.href;
|
||||
if(prop.class) obj.className = prop.class;
|
||||
if(prop.text) obj.innerText = prop.text;
|
||||
if(prop.html) obj.innerHTML = prop.html;
|
||||
|
||||
if(prop.child){
|
||||
if(prop.child.constructor === Array){
|
||||
that.forEach(prop.child, function (i) {
|
||||
obj.appendChild(i);
|
||||
});
|
||||
}
|
||||
else{
|
||||
obj.appendChild(prop.child);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return obj;
|
||||
};
|
||||
|
||||
// 对象选择
|
||||
this.select = function (obj) {
|
||||
if(typeof obj === 'object'){
|
||||
return obj;
|
||||
}
|
||||
else if(typeof obj === 'string'){
|
||||
return document.querySelector(obj);
|
||||
}
|
||||
};
|
||||
|
||||
this.selectAll = function (obj) {
|
||||
if(typeof obj === 'object'){
|
||||
return obj;
|
||||
}
|
||||
else if(typeof obj === 'string'){
|
||||
return document.querySelectorAll(obj);
|
||||
}
|
||||
};
|
||||
|
||||
// 弹窗
|
||||
kico.notice_list = this.create("div", {class: "ks-notice-list"});
|
||||
|
||||
this.notice = function (content, attr) {
|
||||
var item = that.create("div", {class: "ks-notice"});
|
||||
item.innerHTML += "<span class='content'>" + content + "</span>";
|
||||
|
||||
kico.notice_list.appendChild(item);
|
||||
|
||||
if(!document.querySelector("body > .ks-notice-list")) document.body.appendChild(kico.notice_list);
|
||||
|
||||
if(attr && attr.time){
|
||||
setTimeout(notice_remove, attr.time);
|
||||
}
|
||||
else{
|
||||
var close = this.create("span", {class: "close"});
|
||||
|
||||
close.addEventListener("click", function () {
|
||||
notice_remove();
|
||||
});
|
||||
|
||||
item.classList.add("dismiss");
|
||||
item.appendChild(close);
|
||||
}
|
||||
|
||||
if(attr && attr.color){item.classList.add(attr.color);}
|
||||
|
||||
function notice_remove() {
|
||||
item.classList.add("remove");
|
||||
|
||||
setTimeout(function () {
|
||||
try{
|
||||
kico.notice_list.removeChild(item);
|
||||
item = null;
|
||||
}
|
||||
catch(err) {}
|
||||
|
||||
if(document.querySelector("body > .ks-notice-list") && kico.notice_list.childNodes.length === 0){
|
||||
document.body.removeChild(kico.notice_list);
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
|
||||
// 遮罩
|
||||
kico.overlay = this.create("div", {class: "ks-overlay"});
|
||||
|
||||
this.overlay = function (attr) {
|
||||
document.body.appendChild(kico.overlay);
|
||||
|
||||
if(attr && attr.time){
|
||||
setTimeout(overlay_remove, attr.time);
|
||||
}
|
||||
else{
|
||||
kico.overlay.onclick = function (){ overlay_remove() };
|
||||
}
|
||||
|
||||
if(attr && attr.code){
|
||||
kico.overlay.onclick = function (){ overlay_remove(); attr.code() }
|
||||
}
|
||||
|
||||
function overlay_remove() {
|
||||
kico.overlay.onclick = null;
|
||||
kico.overlay.classList.add("remove");
|
||||
|
||||
setTimeout(function () {
|
||||
if(document.querySelector("body > .ks-overlay")){
|
||||
kico.overlay.classList.remove("remove");
|
||||
document.body.removeChild(kico.overlay);
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
|
||||
// 图片缩放
|
||||
kico.image_box = [];
|
||||
kico.image_box.img = this.create("img");
|
||||
kico.image_box.prev = this.create("div", {class: "ks-prev"});
|
||||
kico.image_box.next = this.create("div", {class: "ks-next"});
|
||||
kico.image_box.ball = this.create("div", {class: "ks-ball"});
|
||||
|
||||
kico.image_box.wrap = this.create("div", {class: "ks-image", child: [
|
||||
kico.image_box.img, kico.image_box.prev, kico.image_box.next, kico.image_box.ball
|
||||
]});
|
||||
|
||||
this.image = function (selector) {
|
||||
var current = 0;
|
||||
var get_images = this.selectAll(selector);
|
||||
|
||||
// 设置图片
|
||||
function set_image(img) {
|
||||
if(img.getAttribute("ks-original") !== null){
|
||||
kico.image_box.img.src = img.getAttribute("ks-original");
|
||||
}
|
||||
else if(img.src){
|
||||
kico.image_box.img.src = img.src;
|
||||
}
|
||||
|
||||
kico.image_box.ball.classList.add("loading");
|
||||
}
|
||||
|
||||
// 设置按钮
|
||||
function set_buttons(c) {
|
||||
function l(){
|
||||
if(current - 1 >= 0) current--;
|
||||
|
||||
set_image(get_images[current]);
|
||||
}
|
||||
|
||||
function r(){
|
||||
if(current + 1 < get_images.length) current++;
|
||||
|
||||
set_image(get_images[current]);
|
||||
}
|
||||
|
||||
kico.image_box.prev.onclick = l;
|
||||
kico.image_box.next.onclick = r;
|
||||
}
|
||||
|
||||
// 循环内单条设定
|
||||
function set_item(obj, num) {
|
||||
var scale = 1;
|
||||
var locationX, locationY;
|
||||
|
||||
obj.setAttribute("ks-image", "active");
|
||||
|
||||
/*kico.image_single.onmousewheel = function () {
|
||||
console.log(event);
|
||||
if(event.wheelDelta > 0 || event.deltaY < 0){
|
||||
if(scale > 1){
|
||||
scale = scale - 0.1;
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(scale >= 1){
|
||||
scale = scale + 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
/*if(event.offsetX / window.innerWidth > 0.5){
|
||||
//locationX = "right";
|
||||
locationX = parseInt((event.offsetX / window.innerWidth) * 100) + "%";
|
||||
console.log("kuan" + window.innerWidth);
|
||||
console.log(event.offsetX);
|
||||
//console.log(window.innerWidth / );
|
||||
}
|
||||
else{
|
||||
locationX = parseInt((event.offsetX / window.innerWidth) * 100) + "%";
|
||||
//locationX = "left";
|
||||
}*/
|
||||
|
||||
/*locationX = (event.offsetX / window.innerWidth) * 100 + "%";
|
||||
locationY = (event.offsetY / window.innerHeight) * 100 + "%";
|
||||
|
||||
//event.offsetY / window.innerHeight > 0.5 ? locationY = "bottom" : locationY = "top";
|
||||
|
||||
kico.image_single.style.transform = "scale(" + scale + ")";
|
||||
kico.image_single.style.transformOrigin = locationX + " " + locationY;
|
||||
};*/
|
||||
|
||||
function single_click(){
|
||||
/*scale = 1;
|
||||
locationX = "50%";
|
||||
locationY = "50%";*/
|
||||
|
||||
current = num;
|
||||
console.log("现在选中了" + current);
|
||||
|
||||
//kico.image_single.style.transform = "scale(" + scale + ")";
|
||||
//kico.image_single.style.transformOrigin = locationX + " " + locationY;
|
||||
|
||||
set_image(obj);
|
||||
set_buttons(num);
|
||||
|
||||
if(!document.body.contains(kico.image_box.wrap)) {
|
||||
document.body.appendChild(kico.image_box.wrap);
|
||||
}
|
||||
}
|
||||
|
||||
obj.onclick = single_click;
|
||||
}
|
||||
|
||||
this.forEach(get_images, function (i, j) {
|
||||
if(i.src || i.getAttribute("ks-original")){
|
||||
set_item(i, j);
|
||||
}
|
||||
});
|
||||
|
||||
kico.image_box.img.onclick = function () {
|
||||
kico.image_box.wrap.classList.add("remove");
|
||||
setTimeout(function () {
|
||||
try{
|
||||
document.body.removeChild(kico.image_box.wrap);
|
||||
kico.image_box.wrap.classList.remove("remove");
|
||||
}
|
||||
catch (err){}
|
||||
}, 300);
|
||||
};
|
||||
|
||||
kico.image_box.img.onload = function () {
|
||||
kico.image_box.ball.classList.remove("loading");
|
||||
}
|
||||
};
|
||||
|
||||
// AJAX 组件
|
||||
this.ajax = function (prop) {
|
||||
if(!prop.url){
|
||||
prop.url = document.location.origin + document.location.pathname;
|
||||
}
|
||||
|
||||
function test_crossDomain() {
|
||||
var a = document.createElement("a");
|
||||
a.href = window.location.hostname;
|
||||
return a.hostname === prop.url ? true : false;
|
||||
}
|
||||
|
||||
if(prop.method === "POST"){
|
||||
var data = new FormData();
|
||||
|
||||
for(var pk in prop.data){
|
||||
data.append(pk, prop.data[pk]);
|
||||
}
|
||||
}
|
||||
else if(prop.method === "GET"){
|
||||
var url = prop.url + "?";
|
||||
|
||||
for(var k in prop.data){
|
||||
url += k + "=" + prop.data[k] + "&";
|
||||
}
|
||||
|
||||
prop.url = url.substr(0, url.length - 1);
|
||||
}
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
request.open(prop.method, prop.url);
|
||||
if(prop.crossDomain){ request.setRequestHeader("X-Requested-With", "XMLHttpRequest"); }
|
||||
|
||||
if(prop.header){
|
||||
for(var i in prop.header){
|
||||
request.setRequestHeader(prop.header[i][0], prop.header[i][1]);
|
||||
}
|
||||
}
|
||||
|
||||
request.send(data);
|
||||
|
||||
request.onreadystatechange = function () {
|
||||
if(request.readyState === 4){
|
||||
if(request.status === 200 || request.status === 304){
|
||||
prop.success ? prop.success(request) : console.log(prop.method + " 请求发送成功");
|
||||
}
|
||||
else{
|
||||
prop.failed ? prop.failed(request) : console.log(prop.method + " 请求发送失败");
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 返回页头
|
||||
this.scrollTop = function () {
|
||||
function to_top(){
|
||||
if(window.scrollY !== 0){
|
||||
window.scrollTo(0, window.scrollY * 0.9);
|
||||
requestAnimationFrame(to_top);
|
||||
}
|
||||
else{
|
||||
cancelAnimationFrame(this);
|
||||
}
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(to_top);
|
||||
};
|
||||
|
||||
// Show Version
|
||||
console.log("%c Kico Style %c https://paugram.com ","color: #fff; margin: 1em 0; padding: 5px 0; background: #3498db;","margin: 1em 0; padding: 5px 0; background: #efefef;");
|
||||
}
|
||||
|
||||
var ks = new Kico_Style();
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
|
||||
<ellipse fill="#F7C170" cx="20" cy="35.5" rx="20" ry="4.5"/>
|
||||
<g opacity="0.2">
|
||||
<path d="M8.066,8.429c0,0,3.92,5.305,3.872,11.618S8,35.799,8,35.799h8.679l-1.297-7.725l10.948,6.994l4.803-6.217
|
||||
c0,0-13.502-1.666-13.485-8.636c0.017-6.969,15.922-6.906,15.922-6.906l-5.725-7.771l-11.165,6.994l-2.952-7.878L8.066,8.429z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M6.066,8.429c0,0,3.92,5.305,3.872,11.618S6,35.799,6,35.799h8.679l-1.297-7.725l10.948,6.994
|
||||
l4.803-6.217c0,0-13.502-1.666-13.485-8.636c0.017-6.969,15.922-6.906,15.922-6.906l-5.725-7.771l-11.165,6.994l-2.952-7.878
|
||||
L6.066,8.429z"/>
|
||||
</g>
|
||||
<g opacity="0.2">
|
||||
<circle cx="19.635" cy="4.117" r="4.117"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="#FFFFFF" cx="17.635" cy="4.117" r="4.117"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 938 B |
Loading…
Reference in New Issue