Kico-Player-Docs/index.html

497 lines
25 KiB
HTML
Executable File
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>&lt;link href="KPlayer.css" rel="stylesheet" type="text/css" /&gt;</code></pre>
<p>2. 引用 JS</p>
<pre class="language-html"><code>&lt;script src="KPlayer.js"&gt;&lt;/script&gt;</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>