237 lines
11 KiB
HTML
Executable File
237 lines
11 KiB
HTML
Executable File
<!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> |